Question

我试图制作一个可滚动的html-div，但是当我在同一个容器中添加另一个div时，大小就搞乱了。
见下面的代码;隐藏标题div，另一个div是正确的大小。一旦我启用标题，另一个div将延伸到其父级的底部之下。

为什么会这样做，我该如何防止呢？

CSS

.div2 {
    width:40%;
    height:400px;
    border:2px #000 solid;
}
.div-header {
    padding:20px;
    background-color:#fee;
    /* display:none; */
}
.div2-body {
    background-color:#efe;
    overflow:auto;
    height:100%;
}

HTML

<div class='div2'>
    <div class='div-header'>header<br>section</div>
    <div class='div2-body'>
        Lorem ipsum dolor sit amet consectetuer amet Vivamus nibh sagittis Sed. Penatibus ligula interdum tincidunt orci ante tellus justo amet enim Maecenas. Phasellus amet lacus tristique habitant non dictum vitae dignissim urna urna. Tempor lobortis Curabitur dui nibh dui mi id Vestibulum fringilla sit. Quis volutpat orci laoreet vitae nec orci quis In rutrum elit. Odio Duis amet Morbi faucibus.
        Massa Nulla Curabitur convallis sapien nibh habitant hendrerit tempus eget est. Auctor enim quis et Praesent Donec convallis turpis Nam Curabitur Sed. Ac vitae risus Ut Curabitur vel id elit leo sem facilisi. Ligula consectetuer convallis sem Integer feugiat sapien risus adipiscing facilisis commodo. Enim laoreet ipsum sagittis parturient id nibh Integer porttitor wisi Donec. Ut est dui Ut sem consectetuer.
        Laoreet penatibus tortor quis gravida tortor Nullam justo Maecenas pretium a. Convallis ut morbi Integer et est Nam lacus enim Vivamus semper. Auctor Sed pede justo nisl Pellentesque lacinia Curabitur est velit sagittis. Neque venenatis et ut odio malesuada Nulla vestibulum dui iaculis consectetuer. Vivamus nascetur tempus Vestibulum tincidunt nibh Nunc.
        Risus Nulla semper tellus consequat orci ac Sed auctor leo Nulla. Vitae nec libero felis interdum dolor consequat pellentesque nunc Nam velit. Curabitur ante id egestas tellus fames Curabitur interdum quam pellentesque eget. Odio gravida ut sapien Nullam Suspendisse hendrerit lacinia Cum Curabitur metus. Congue tincidunt elit turpis eget volutpat aliquet neque est Curabitur dui. Enim Aenean Donec leo nibh vitae.
        Sed In Aenean odio molestie ut Aliquam Nulla eu convallis elit. Nam tempus ornare at eros et elit dui congue Aenean est. Ridiculus mollis dui lacinia justo dui vitae Nullam eget metus sed. Orci senectus tempor aliquam Aenean lobortis interdum ligula mi Maecenas iaculis. A et pulvinar condimentum Lorem tempus dictumst quis enim lorem amet. Laoreet non auctor Aliquam hac.
    </div>
</div>

<小时/> 的 [编辑]

进一步解释，我想要完成的事情：我想在浏览器中的固定位置使用div，例如。 position:fixed; left:100px; top:100px div将包括2个子div：1个标题（不可滚动）和一个＆＃34;内容＆＃34; div，一旦内容超出页面底部就应滚动。

我已经完成了大部分工作，但是我遇到了滚动div这个问题。事实上，＆＃34; div2＆＃34;需要与底部挂钩（边距为20px），因此在调整浏览器大小时它会自行调整大小，因此不能具有固定的高度。我只是搞砸了一些div来使它工作，显然，直到现在，我不能:(

希望这能更好地解释我的目标。

Answer 1

您需要将高度从400px设置为100％，因为固定高度（以像素为单位）会重叠。

.div2 {
width: 40%;
height: 100%;
border: 2px #000 solid;

更新：试试这个

.div2 {
    width:40%;
    border:2px #000 solid;
}
.div-header {
    padding:20px;
    background-color:#fee;
    height:400px;
    /*display:none;*/ 
}
.div2-body {
    background-color:#efe;
    overflow:auto;
    height:400px;
}

Answer 2

从主div中删除height属性（以避免固定高度），它将根据子div自动处理高度，并且滚动也能正常工作。

使用以下css：

 <style type="text/css">
        .div2 {
            width: 40%;
            border: 2px #000 solid;
        }

        .div-header {
            padding: 20px;
            background-color: #fee;
            /* display:none; */
        }

        .div2-body {
            background-color: #efe;
            overflow: auto;
            height: 400px;
        }
    </style>

Answer 3

要阻止内部div超出父div ，您需要在DIV2上设置overflow。因此：

.div2 {
width: 40%;
height: 400px;
border: 2px #000 solid;
overflow: hidden;
}

滚动div大小的问题

3 个答案: