0

我有一个简单的 HTML 页面，它包含两个div垂直对齐的 s。由于 second ，该页面是可滚动的div。我希望第一个div的位置是固定的或不可滚动的，这样只有第二个div是可滚动的。我添加position:fixed到 firstdiv的 css 但这次，第二个div放在 first 上div，所以第一个div消失在 second 下div。

CSS 

body {
  width:1000px;
  height:100%;
  margin:0 auto;/*body ortalama*/
}

#div1 {
  height:300px;
  background-color:#00CC66;
}

#div2 {
  display:block;
  word-wrap:break-word;
  padding:30px;
  font-size:72px;
  background-color:#FF3;
}

HTML

<div>
  <div id="div1"></div>
  <div id="div2">
    <p>
      <!--Content Here-->
    </p>
  </div>
</div>
4

4 回答 4

2

固定总是相对于父窗口，而不是元素。一旦位置设置为固定，它就会从文档流中取出。

固定定位是绝对定位的一个子类别。唯一的区别是对于一个固定定位的盒子，包含块是由视口建立的。

所以在第二个 div2 中添加这些

position:relative;
top:300px;    /*Bump it down by the height of div1;*/

希望能帮助到你;

于 2013-03-30T16:25:06.753 回答
0

好的，这是另一种选择。它的布局有些不同，但应该可以完成工作。它使用 div1 上的绝对定位使其到达顶部，并使用百分比宽度来阻止它覆盖 div2 的滚动条。它并不完美，因此您可能需要稍微调整一下。

HTML

<body>
<div>
     <div id="div1">a</div>
    <div id="div2">
    <p>                               SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSDDDDDDDDDLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLDDDDDDDDDDDDDDDDDDDDDDDDDDDDDAMSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSDDDDDDDDDLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</p>
</div>
</div>

</body>

CSS：

body{
    width:100%;
    height:100%;
    margin:0 auto;/*body ortalama*/
overflow:hidden;
}

#div1{
    height:300px;
    background-color:#00CC66;
position:absolute;
top:0;
width:97.5%;
}

#div2{
    display:block;
    word-wrap:break-word;
    padding:30px;
    font-size:72px;
    background-color:#FF3;
  overflow-y:auto;
  max-height:50px;

    padding-top:300px;
    }

示例：http: //jsfiddle.net/38xkn/6/

于 2013-03-30T17:23:04.610 回答
0

将此 css 添加到#div2（您需要指定高度，#div2否则滚动条将不知道从哪里开始）：

  overflow-y:auto;
  height:50px;

请参阅此处的示例：http: //jsfiddle.net/38xkn/1/（在您将宽度设置为 100 像素时先向右滚动body，然后您会看到 的滚动条#div2）。

于 2013-03-30T16:21:14.020 回答
0

您应该添加一个高度并设置溢出自动而不是滚动，因为使用滚动您将始终拥有滚动条，即使内容小于指定高度也是如此。例如：

#div2 {
    background-color: #FFFF33;
    display: block;
    font-size: 72px;
    height: 200px;
    overflow: auto;
    padding: 30px;
    word-wrap: break-word;
}
于 2013-03-30T16:24:40.800 回答