Question

我有一个页面，我设置了一个div，其中将放置所有内容。我让div按照我的意愿工作，但当我进入显示所有记录的管理页面时，我注意到我无法向下滚动以查看其余记录。

我设法解决了这个问题，因此如果内容位于页面下方，我可以向下滚动。但是，需要向下滚动的页面在div的右侧而不是实际页面（最右侧）有一个滚动条。我使用overflow-y：hidden来删除滚动条，但我无法向下滚动。

我很想知道是否有人有任何建议，以便从div中删除滚动条，只在需要时显示标准滚动条。这是当前的代码：

HTML

<html class="no-js" lang="en">
 <head>
  <title>Home</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <link rel="stylesheet" href="css/Base.css"/>
 </head>

 <body>
  <div class="wrapper">
    <p> Duplicate text to test </p>
  </div>
 </body>
</html>

CSS

*
  {
   margin: 0;
   padding: 0;
  }

html
  {
   height: 100%;
  }

body 
  {
   background-image:url('../images/background.png');
   font-family:             Arial; 
   color:                   #000000;
   font-size:               14px;
   height:                  100%;
  }

.wrapper 
 {
  width: 62.5%; 
  height: 100%;
  overflow:auto;
  background: #fffac8;
  margin: 0 auto;
  box-shadow: 0px 0px 10px 0px #000000; 
 }

如果从div中删除了overflow：auto，我可以像任何普通页面一样向下滚动，但是div会被切割到标准页面。

Overflow removed from div (Want it like this but with the div still stretching when needed)

Answer 1

在.wrapper CSS规则中，尝试使用min-height而不是height。

 .wrapper 
 {
  width: 62.5%; 
  min-height: 100%;
  overflow:auto;
  background: #fffac8;
  margin: 0 auto;
  box-shadow: 0px 0px 10px 0px #000000; 
 }

Answer 2

从包装器div中删除height: 100%;。它是通过侮辱height: auto;给予它们身高：100％你强迫.wrapper跟随其父亲的身高。如果你知道它是否会溢出，那么它会自动进行滚动。所以不要这样做，这不是必要的。我希望它适合你的情况。

Div适合页面并展开/滚动

2 个答案: