如何在不隐藏内容的情况下删除双倍 y 滚动？答案

【问题标题】：How to remove doubled y-scrolling without content hidden?如何在不隐藏内容的情况下删除双倍 y 滚动？
【发布时间】：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这样的地方吗？

标签： css twitter-bootstrap laravel-blade

【解决方案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 我看到你在你的网站上应用了这个，它确实解决了双滚动条问题。您能把我的回答标记为已接受吗？