gpt4 book ai didi

html - CSS:内容区域必须占据 100% 的高度

转载 作者:太空宇宙 更新时间:2023-11-04 13:39:19 25 4
gpt4 key购买 nike

这让我发疯...我正在 http://one29090testvdscom.accounts.combell.net/nl 建立页面.这是一个包含页眉、左侧菜单、内容和页脚的页面。宽度固定为 960px,水平居中。这一切都有效。但是,如果内容中的文字很少,我希望灰色内容区域始终占用可用的屏幕高度,以便页脚位于页面下方。

页面看起来像:

  <body>

<!-- Centered container that contains site -->
<div id="centeredcontainer">
<!-- Area with header -->
<div id="header">
header here
</div>
<!-- Area that contains main menu on the left and content on the right -->
<div id="mainmenuandcontent">
<!-- Main menu on the left -->
<div id="mainmenu">
main menu here
</div>
<!-- Content on the right -->
<div id="content">
body here
</div>
<!-- Clears the floats so that next elements can use margins normally -->
<div class="clearer"></div>
<!-- Red line under content -->
<div id="RedLineUnderContent"></div>
</div>
<!-- Area with languages -->
<div id="languages">
footer here
</div>
</div>
</body>

相关的 CSS 是:

body
{
font-size: 12px;
font-family:Century Gothic,Helvetica,Verdana,Arial,sans-serif;
line-height:1.5em;
margin: 0;
padding: 0;
background-color: Black;
}

#centeredcontainer
{
width: 960px;
margin-left: auto ;
margin-right: auto ;
}

#header
{
margin-bottom: 20px;
margin-top:20px;
}

#mainmenuandcontent
{
width: 960px;
clear: both;
position: relative;
}

#mainmenu
{
float: left;
width:180px;
padding:10px;
}

#content
{
float: left;
background-color: #403F3F;
width: 760px;
min-height: 400px;
color:White;
}

#RedLineUnderContent
{
height: 20px;
background: #A10C10;
margin-left: 200px;
}

#languages
{
margin-top: 10px;
margin-left: 200px;
margin-bottom:20px;
text-transform:uppercase;
}

.clearer
{
clear:both;
}

最佳答案

我知道没有跨浏览器的方法可以单独在 CSS 中执行此操作。

我昨晚刚刚用 JS 做了类似的事情:

<head>
....
<script type="text/javascript">
function resize() {
var frame = document.getElementById("main");
var windowheight = window.innerHeight;
document.body.style.height = windowheight + "px";
frame.style.height = windowheight - 180 + "px";
}
</script>
</head>
<body onload="resize()" onresize="resize()">
...

这会将 id 为“main”的元素的大小调整为窗口的可见高度减去 180px(180is 是我的标题的高度)

关于html - CSS:内容区域必须占据 100% 的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6864778/

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