gpt4 book ai didi

html - CSS 和 HTML 中的最小高度

转载 作者:行者123 更新时间:2023-11-28 18:45:04 27 4
gpt4 key购买 nike

我仍在我的网站上工作,我终于让粘性页脚起作用了。下一个问题是我希望这些列填满所有内容,直到页脚开始。从列底部到页脚顶部没有空格。

Here is my example

HTML

<!DOCTYPE html>
<html>
<head>
<title>In ontwikkeling!</title>

<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="css/basis.css" />
</head>

<body>
<div id="menu">
Menu
</div>
<div id="container">
<div id="header">
Header
</div>
<div id="sidebar-l">
<div class="padding">
Sidebar Links
</div>
</div>

<div id="sidebar-r">
<div class="padding">
Sidebar Rechts
</div>
</div>

<div id="content">
<div class="padding">
Content
</div>
</div>
<div class="push"></div>
</div>
<div id="footer">
Footer
</div>
</body>
</html>

CSS

/* CSS-file behorend bij TNG */

html,body{
margin:0;
padding:0;
}

#menu{
background-color:rgb(255,86,81);
height:50px;
}

#container{
width:1000px;
margin:auto;
}

#header{
background-color:rgb(224,17,80);
height:150px;
}

#sidebar-l{
background-color:rgb(141,171,242);
width:280px;
float:left;
position:fixed;
height:100%;
}

#sidebar-r{
background-color:rgb(141,171,242);
width:220px;
float:right;
height:100%;
}

#content{
background-color:rgb(39,85,92);
margin-left:280px;
margin-right:220px;
}

#sidebar-l .padding, #sidebar-r .padding, #content .padding{
padding:10px;
}

#footer{
background-color:rgb(84,48,64);
width:1400px;
height:66px;
left:50%;
margin-left:-700px;
bottom:0;
position:fixed;
clear:both;
}

.push{
height:66px;
}

当您查看左侧的侧边栏时,我希望内容和“侧边栏权利”相同。CSS 和 HTML 都在上面的链接上!

最佳答案

我借用了 this question 的选择答案并想出了这个:

jsFiddle

基本上,列后面有绝对定位的、可伸缩的虚拟元素,因此无论浏览器窗口多高,它们的背景色总是会填充空白。

在我对代码所做的其他各种改进中,我制作了 sticky footer 实际上现在是粘性的,因为它会根据其上方的内容进行调整。调整面板窗口大小以进行观察。

关于html - CSS 和 HTML 中的最小高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10667961/

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