如何在不隐藏内容的情况下删除双倍 y 滚动?
Posted
技术标签:
【中文标题】如何在不隐藏内容的情况下删除双倍 y 滚动?【英文标题】:How to remove doubled y-scrolling without content hidden? 【发布时间】:2021-06-10 04:15:36 【问题描述】:在 laravel 5.8 / bootstrap 4.1 应用程序中,我有翻倍 y 滚动的页面:https://prnt.sc/10jf83i 我尝试删除页面的滚动(内部滚动)
在 app/views/layout/member.blade.php 我有:
<body>
@include('elements.member_header')
@yield('content')
@include('elements.member_footer')
<script> public(); </script>
@yield('scripts')
</body>
在 page.blade.php 中:
@extends('layout.app')
@section('title', $title)
@section('description', $description)
@section('content')
<div class="member-wrapper" id="member-content">
@include('elements.member_sidebar')
<div class="content-wrapper">
<div class="single-page">
<div class="pages-heading">
<h2>@lang('member.profile')</h2>
</div>
如果我尝试用定义来治疗:
然后页面底部隐藏,以防页面动态内容高度较大。
有什么方法可以解决吗?
谢谢!
【问题讨论】:
这不是 Laravel 的问题。这是 CSS / Bootstrap 问题。您应该提供实际呈现的 html 片段。没有人可以知道您的页面的外观以及该错误的外观 或者您可以分享实际的网站网址,以便我调查您的问题。 你能把生成的html和css粘贴到jsfiddle.net这样的地方吗? 【参考方案1】:我会将内容包装器设置为没有高度限制。
我无法从您的代码中看到它是如何受到限制的,但我认为将 height 和 max-height 设置为 auto 应该可以。
根据现有规则的特殊性,您可能需要使用 !important 来覆盖。
.content-wrapper
height:auto !important;
max-height:none !important;
编辑:
我刚刚检查并注意到您只需要删除或覆盖.member-wrapper
中的高度
.member-wrapper
height: auto;
【讨论】:
我尝试修改类定义但没有成功,仍然是 2 个滚动条。但是在我浏览器的控制台中,我看到属性 max-height 无效:imgur.com/a/ViPO919 你能看看吗? 对不起,最大高度值应该是 none 而不是 auto。我更新了答案 我什至无法在您的平台上注册。我得到 php 错误。 也许你可以通过在浏览器中“保存页面”来提供html和css @mstdmstd 我看到你在你的网站上应用了这个,它确实解决了双滚动条问题。您能把我的回答标记为已接受吗?以上是关于如何在不隐藏内容的情况下删除双倍 y 滚动?的主要内容,如果未能解决你的问题,请参考以下文章
如何在不将页面滚动条重置为顶部的情况下使用 jQuery 为固定 div 设置动画
如何在不滚动 textView 的情况下使 UITableViewCell 的高度扩展以适应 UITextView 的内容并包装文本? (斯威夫特 5)