gpt4 book ai didi

html - 如何使用 html/css 将容器 div 从页眉拉伸(stretch)到页脚?

转载 作者:太空宇宙 更新时间:2023-11-04 04:29:56 24 4
gpt4 key购买 nike

我想拉伸(stretch)我的红色 content cless 从页脚拉伸(stretch)到页眉。我知道如果我用内容填充它,它会,但我如何让它按原样拉伸(stretch)?

您可以克隆元素 here

相关代码:

html:

<body>
<div class="wrapper">
<div class="header">
<div class="nav">
<div class="logo">
<strong>
<a href="index.html">
<img src="images/logo.png" alt="Sam Jarvis logo"/>
</a>
</strong>
</div>
<div class="menu">
<ul>
<li><a href="#home">HOME</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#work">PORTFOLIO</a></li>
<li><a href="#clients">CONTACT</a></li>
</ul>
</div>
</div>
</div>
<div class="content">

</div>
</div>
<div class="footer">
<div class="footercontent">
<p>&copy; 2013 Friend | Design and Development. All Rights Reserved.</p>
</div>
</div>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>

CSS:

.wrapper {

min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -6.25em;
}

.header {
width: 100%;
height: 100px;
background-color: #000000;
margin: 0 auto;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}

.content {
width: 1000px;
border: 1px solid #ff0000;
margin: 0 auto;
height: 100%;
min-height: 100%;
}

enter image description here

最佳答案

两件事:

  1. 添加规则html,body {height:100%}
  2. #wrapper
  3. 中删除 height: auto !important;

jsFiddle example

关于html - 如何使用 html/css 将容器 div 从页眉拉伸(stretch)到页脚?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17479555/

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