Question

如何在彼此之上创建两个div元素？

我想创建一个网页，其中有两个div个元素在彼此之上：

1- the one on top  --> fixed 

2- the one on bottom --> scrollable

谢谢，非常感谢你的帮助。

Answer 1

非常简单!!

body {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0px auto;
  font-family: Calibri, Georgia, Ubuntu-C;
  font-size: 16px;
  margin-bottom: 20PX
}
#header {
  width: 100%;
  height: 50px;
  background: skyblue;
  position: fixed;
}
#content {
  height: 750px;
  overflow: auto;
  padding: 20px;
  padding-bottom: 30px;
  background: ORANGE;
}

<div id="header">

</div>

<div id="content">

</div>

Answer 2

试试这个https://jsfiddle.net/2Lzo9vfc/74/

HTML

<div class="fixed">Fixed</div>
<div class="scroll">Scroll</div>

CSS

.fixed {
    position: fixed;
    background: blue;
    width: 100%;
    height: 50px;
    top: 0;
    color: white;
}

.scroll {
    height: 1000px;
    width: 100%;
    background: green;
    color: white;
    padding-top:50px;
}

Answer 3

的CSS：

* {margin: 0 auto;}
body {
    width:100%;
    heighT:100%;
    position: fixed;
}
#header {
    width: 100%; /* Any Width you want */
    height: 20%;  /* Any Height you want */
    position: fixed;
    top:0;
    left: 0;
}
#content {
    width:100%;   /* Any Width you want */
    height:80%;   /* Any Height you want */
    overflow: auto;
    margin-top: 20%; /* It should be the same with your #header height */
}

HTML：

<div id="header"></div>
<div id="content"></div>

只需一点，内容div和标题div的高度总和应为100％。

Answer 4

我不确定这是不是你对你的问题的意思，但基本上这是一个div在另一个上面，其中一个是可滚动的。

<!DOCTYPE html>
<html lang="pt">
<html>
   <head>
        <meta charset="utf-8" />
        <title>demo</title>
        <style>
            .fixedDiv{
                width:250px; 
                height: 400px;
                padding: 10px;
                background-color: #FF0000;
               }
        .scrollDiv{
            position:relative; 
            top:100px; 
            width:100%;
            height:73%;
            overflow-y: auto;
        } 

    </style>
</head>
<body>
    <div class="fixedDiv">
        <div class="scrollDiv">
            Maecenas dignissim, nunc sit amet accumsan fermentum, neque neque sagittis lorem, id auctor massa ipsum vel ligula. Curabitur molestie nunc vel lorem feugiat faucibus. Donec sit amet auctor sapien. Cras sed metus eget ligula imperdiet eleifend id sed enim. Nulla lacinia nulla a tortor suscipit malesuada non non nulla. Nulla non iaculis tortor. Sed mi diam, interdum ut purus sed, sodales viverra ex. Mauris nisl est, tristique ut elit ac, hendrerit hendrerit nibh. Praesent ligula urna, condimentum nec maximus a, blandit sit amet velit. Ut auctor sodales justo at vehicula. Ut tristique est feugiat ligula dignissim, vel ornare massa fermentum. Donec lacinia, odio eget ullamcorper fringilla, magna quam ullamcorper augue, vel faucibus libero arcu quis arcu. Vivamus sollicitudin sem sapien, ut dignissim ex volutpat a. Donec neque enim, faucibus id facilisis nec, feugiat accumsan lorem.
            </div>
        </div>

    </body>
</html>

修复了顶部div和底部可滚动div

4 个答案: