gpt4 book ai didi

html - Div inside div (100% height) 并保持页脚在底部 - JSFiddle

转载 作者:行者123 更新时间:2023-11-28 11:25:38 26 4
gpt4 key购买 nike

我创建了下面的 jsfiddle 来重现我的问题,我希望 .dashboard 和 .inner-dashboard 始终具有 100% 的高度并将页脚始终保持在底部。

http://jsfiddle.net/rv7xN/1/

HTML

<div id="wrap">
<body>
<div class="dashboard">
<div class="inner-dashboard">

</div>
</div>
</body>
</div>
<div id="footer"></div>

CSS

html,body{
height:100%;
}
#wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
}
#footer {
height: 60px;
background-color: blue;
}
.dashboard{
width: 100%;
height: auto;
min-height: 100%;
position: absolute;
padding-bottom: -60px;
background-color:green;
}
.inner-dashboard{
height:100%;
padding-bottom: -60px;
background-color:red;
}

最佳答案

这是一个例子:jsFiddle

我必须修改 html 以便为仪表板和页脚提供一个通用容器。

<div id="wrap">

<div class="dashboard">
<div class="inner-dashboard">

</div>
</div>
<div id="footer"></div>
</div>

我将 wrapper(公共(public)容器)放在表格中,将其他元素放在表格单元格中。因此,即使您的仪表板高度为 200%,页脚仍位于底部。

html,body{
height:100%;
}
#wrap {
position:absolute;
display:table;
height:100%;
width:95%;
padding-bottom:60px;
}

.dashboard{
width: 95%;
height: 200%;
display:table;
border:5px solid green;
}
.inner-dashboard{
width: 95%;
height: 100%;
display:table-cell;
border:5px solid red;
}
#footer {
display:table;
height: 60px;
width:95%;
border:5px solid blue;
bottom:-10px;
}

是吗?!

关于html - Div inside div (100% height) 并保持页脚在底部 - JSFiddle,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21363286/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com