gpt4 book ai didi

html - 如何使用 CSS 使页眉和页脚之间的列全高窗口并防止 underwrap

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

我想使用 CSS 制作一个简单的 HTML 布局,其中我有一个标题,两列,其中右侧的列是固定宽度(现在假设为 100 像素)。左栏会在某个时候生成内容,它不应该超过页面底部,但它可能会在未来......无论如何我希望我的两个栏都延伸到页脚......这是我的 HTML :

<!DOCTYPE html>
<html>
<head>
<title>Coming soon...</title>
</head>
<body>
<div class="wrapper">
<div class="header">
Header
</div>
<div class="content">
Content Here will be dynamic... sometimes 1 word, sometimes 1000 words! Either way, I want to reach the footer!

</div>
<div class="right-menu">
Here will be a menu... I want this to be the same height as
the content DIV
</div>
<div class="footer">
footer
</div>
</div>
</body>
</html>

这是我的 CSS:

.header {
background-color: Coral ;
width: 100%;
}

.content {
background-color: BlanchedAlmond ;
float:left;
width:100%;
margin-right: -100px;

}

.right-menu {
background-color: BurlyWood ;
float: right;
width: 100px;
}

.footer {
background-color: Coral;
width: 100%;
clear: both;
position: absolute;
bottom: 0;
}

我为此制作了一个 JSFiddle,我注意到我的内容 div 似乎也在我的菜单下运行……我怎么能阻止它呢:https://jsfiddle.net/dwn82s81/

非常感谢。我意识到我已经很久没有写过任何 CSS 了!

最佳答案

尝试对 .content 进行此更改

.content {
background-color: BlanchedAlmond ;
float:left;
width: 95%;
margin-right: -100px;

}

关于html - 如何使用 CSS 使页眉和页脚之间的列全高窗口并防止 underwrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40007430/

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