Question

我正在尝试完成此布局，但我在尝试使div #content 可滚动（垂直）时遇到问题，而不会使整个页面移动。

HTML：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
    <title>Test Layout</title>
</head>
<body>
    <div id="wrapper">
        <div id="main">
            <div id="sidebar">
                <div id="buttonsContainer">
                </div>
            </div>
            <div id="content">
            Scrollable content here
            </div>
        </div>
    </div>
</body></html>

CSS：

* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: #333;
}

body, html , #wrapper {
    height: 100%;
    overflow: hidden;
}

#wrapper {
    width: 986px;
    margin-right: auto;
    margin-left: auto;
    background-color: #2A2A2A;
}

#main {
    background-color: #FFF;
    width: 970px;
    margin-right: auto;
    margin-left: auto;
    border-right-style: solid;
    border-right-width: 2px;
    border-right-color: #000;
    border-left-style: solid;
    border-left-width: 2px;
    border-left-color: #000;
    height: 100%;
    position: relative;
}

#sidebar {
    height: 100%;
    width: 25%;
    float: left;
    background-color: #111;
    position: absolute;
}

#content {
    margin-left: 25%;
    overflow: auto;
}

#buttonsContainer {
    margin-top: 40%;
    height: 300px;
    width: 100%;
    position: relative;
    background-color: #F00;
}

您可以看到此广告托管here 有什么建议吗？

Answer 1

您需要做的是给内容div一个定义的高度，然后指定overflow来滚动。

这应该有效：

#content {
      margin-left: 25%;
      height: 100%;
      overflow-y: scroll;
}

Answer 2

这是一种做法。使用绝对定位来拉伸#content块以填充#wrapper父块，同时留下25％的左边距。

从包装器块中删除overflow: hidden，您可以获得所需的效果。

＆＃13;

* {
  margin: 0px;
  padding: 0px;
}
body {
  background-color: #333;
}
body,
html,
#wrapper {
  height: 100%;
}
#wrapper {
  width: 986px;
  margin-right: auto;
  margin-left: auto;
  background-color: #2A2A2A;
}
#main {
  background-color: #FF0;
  width: 970px;
  margin-right: auto;
  margin-left: auto;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #000;
  border-left-style: solid;
  border-left-width: 2px;
  border-left-color: #000;
  height: 100%;
  position: relative;
}
#sidebar {
  height: 100%;
  width: 25%;
  float: left;
  background-color: #111;
}
#content {
  position: absolute;
  top:0;
  right: 0;
  left: 25%;
  bottom: 0;
  background-color: lightgray;
  overflow: auto;
}
#buttonsContainer {
  margin-top: 10%; /* small value for demo only */
  height: 100px;
  width: 100%;
  position: relative;
  background-color: #F00;
}

＆＃13;

<div id="wrapper">
  <div id="main">
    <div id="sidebar">
      <div id="buttonsContainer">
      </div>
    </div>
    <div id="content">
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>
      Scrollable content here<br>end
    </div>
  </div>
</div>

＆＃13;

Answer 3

试试这个：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
    <title>Test Layout</title>
</head>
<body>
    <div id="wrapper">
        <div id="main">
            <div id="sidebar">
                <div id="buttonsContainer">
                </div>
            </div>
            <div id="content">
                 <div class="holder">
                  Scrollable content here
                 </div>
            </div>
        </div>
    </div>
</body></html>

和css：

#content .holder {
  display: block;
  overflow: hidden; 
}

Scrollable Div采用100％高度包装

3 个答案: