我无法同时获得float div个height以适应父div的{{1}}。
我已经看到了一些不同的解决方案但我遇到了麻烦，因为当内容量较小时我还需要父div来填充屏幕。
我可以获得一个float ed div来填充空间，但如果另一个有更多内容，那么它看起来很奇怪。
我发布了我认为有效的CSS。您可以在jsfiddle中找到其余内容。
* {
margin: 0;
padding: 0
}
html {
height: 100%;
}
body {
position: relative;
min-height: 100%;
/* to fill screen 100% even with less content */
height: 100%;
/* to allocate only 100% height */
background-color: #460000;
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
color: #fff;
font-weight: 300;
}
#container {
height: 100%;
overflow: auto;
width: 72%;
margin: 0 auto;
background-color: #460000;
border-left: #ECA845 solid 8px;
border-right: #ECA845 solid 8px;
border-bottom: #ECA845 solid 8px;
-webkit-box-shadow: 0px 0px 29px 14px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 29px 14px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 29px 14px rgba(0, 0, 0, 0.75);
}
#container::-webkit-scrollbar {
display: none;
}
body::-webkit-scrollbar {
display: none;
}
#main {
font-size: .75em;
background: url(image/rightt.png) repeat-y right;
background-color: #1281A6;
min-height: calc(100% - 505px);
height: auto;
float: left;
width: 75%;
}
#sidebar {
background-color: #498A21;
min-height: calc(100% - 505px);
height: auto;
float: left;
width: 25%;
}<body>
<div id="container">
<div id="top">
</div>
<nav>
<ul>
<li class="start selected"><a href="index.html">HOME</a>
</li>
<li class=""><a href="#">MEN</a>
</li>
<li><a href="#">WOMEN</a>
</li>
<li><a href="#">PAST ADS</a>
</li>
<li><a href="#">SALES</a>
</li>
<li><a href="#">SHOWS</a>
</li>
<li><a href="#">NEWS</a>
</li>
<li class="end"><a href="#">CONTACT</a>
</li>
</ul>
</nav>
<div id="main">
<article>
<h1>Welcome</h1>
<br>
<div align="center">
</div>
<br>
<p>Proin a risus id diam feugiat pulvinar blandit a lorem. In nec nibh eros. Morbi vitae quam sit amet quam euismod posuere ullamcorper a velit. Nullam blandit nulla lectus, sit amet gravida eros rhoncus id. Duis at efficitur nisi, sit amet aliquet
leo. Nam dolor enim, malesuada non sollicitudin eget, tempus ut nisi. Cras tellus tellus, volutpat nec nibh non, aliquet malesuada eros. Aenean placerat feugiat dolor at egestas. Aenean vulputate sapien eu erat semper tincidunt. Morbi sodales
sit amet dolor vitae malesuada. Quisque vel dolor vel massa sollicitudin finibus. Nullam pharetra interdum nisi nec viverra. Aliquam in dolor efficitur, volutpat lorem ac, sodales erat. Donec id rhoncus quam.</p>
<p>Nam laoreet sodales condimentum. Aliquam velit nunc, volutpat quis erat a, imperdiet vehicula eros. Suspendisse potenti. Phasellus diam libero, hendrerit nec mauris ac, sodales scelerisque eros. Aliquam luctus neque sed turpis tristique, in feugiat
velit ultricies. Phasellus efficitur, velit eget lacinia accumsan, ipsum lacus posuere ipsum, quis elementum augue augue quis risus. Duis laoreet, turpis vel consequat tempor, tortor odio mollis orci, nec ultrices ex sem eu erat. Cras faucibus,
libero sit amet viverra ultrices, elit enim imperdiet dui, ut blandit urna leo eu turpis. Quisque feugiat imperdiet efficitur. Sed finibus tortor at bibendum eleifend. Phasellus ornare venenatis leo non tincidunt.</p>
</article>
</div>
<div id="sidebar">
<ul>
<li>
<ul class="newslist">
<li>
<h4>Upcoming Sale</h4>
<p>Join us at the sale</p>
</li>
</ul>
<ul class="newslist">
<li>
<h4>Thank You</h4>
<p>Ladies and Gentlemen</p>
</li>
</ul>
<ul class="newslist">
<li>
<h4>Latest Catalogue</h4>
<br>
<p>View the catalogue</p>
</li>
</ul>
</ul>
</div>
<div class="clear"></div>
</div>
<footer>
<p><a href="#" target="_blank">Text Here</a>
</p>
</footer>
</body>
答案 0 :(得分：1)
您可以使用flexbox来实现这一目标：
我稍微更改了你的标记并调整了你的CSS。
*,
*::before,
*::after {
box-sizing: border-box
}
* {
margin: 0;
padding: 0
}
html,
body {
height: 100%;
}
body {
position: relative;
/* to allocate only 100% height */
background-color: #460000;
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
color: #fff;
font-weight: 300;
}
#container {
height: auto;
width: 72%;
margin: 0 auto;
background-color: #460000;
border: #ECA845 solid border-width: 0 8px 8px;
box-shadow: 0px 0px 29px 14px rgba(0, 0, 0, 0.75);
}
#container::-webkit-scrollbar {
display: none;
}
body::-webkit-scrollbar {
display: none;
}
@font-face {
font-family: huntson;
src: url(fonts/huntson.ttf);
}
img {
max-width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#main {
font-size: .75em;
background: url(image/rightt.png) repeat-y right;
background-color: #1281A6;
height: auto;
display: flex;
}
#sidebar {
background-color: #498A21;
height: auto;
}
#sidebar h4 {
font-family: huntson;
font-size: 2.75em;
color: #000;
padding: 20px 0px;
letter-spacing: -0.5px;
text-align: center;
border-bottom: #470C0E solid 4px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar ul li {
margin-bottom: 20px;
line-height: 1.9em;
padding: 10px;
}
#sidebar ul li.bg {
background-color: #333;
}
#sidebar li ul {
list-style: none outside none;
margin: 0px;
}
#sidebar li ul li {
display: block;
border-top: none;
padding: 7px 2px;
margin: 0;
line-height: 1.5em;
font-size: 0.85em;
}
#sidebar ul.blocklist {
border-top: 1px solid #333;
}
#sidebar ul.blocklist li {
border-bottom: 1px solid #333;
padding: 0;
}
#sidebar ul.blocklist li a {
border-bottom: 0;
display: block;
padding: 12px 10px;
}
#sidebar ul.blocklist li a.selected {
background-color: #E8D46F;
background: linear-gradient(#E8D46F, #E9B252);
border: 1px solid #9B7830;
color: #fff;
font-weight: bold;
}
#sidebar ul.newslist li {
padding: 30px 5px;
text-align: center;
}
#sidebar ul.newslist p {
color: #000;
font-size: 1.1em;
font-weight: bold;
}
footer {
height: 50px;
width: 100%;
}
footer p,
footer p a {
color: #fff;
text-decoration: none;
text-align: center;
padding-top: 15px;
}
article {
padding: 10px 40px 20px 5px;
}
article p {
font-size: 1.25em;
line-height: 1.9em;
margin-bottom: 20px;
}
h1 {
color: #FFF;
font-family: huntson;
font-size: 5em;
font-weight: 200;
padding: 0 0 5px;
margin: 0;
}
img.border {
border: 5px #fff solid;
margin-bottom: 20px;
}
nav {
width: 100%;
background-color: #CCB088;
padding: 15px 0px;
}
nav ul {
list-style: none;
margin: 0;
text-align: center;
}
nav ul li {
display: inline;
padding: 0px 18px;
}
nav ul li a {
color: #470C0E;
font-size: 1em;
text-decoration: none;
letter-spacing: 0;
border-bottom: none;
font-family: "Arial Black", Gadget, sans-serif;
}
nav ul li a:hover {
text-decoration: none;
color: #fff;
border-bottom: 1px solid #ECA845;
}
nav ul li.selected a,
nav ul li.selected a:hover {
color: #931C1F;
}
.clear {
clear: both;
}<div id="container">
<nav>
<ul>
<li class="start selected"><a href="index.html">HOME</a>
</li>
<li class=""><a href="#">MEN</a>
</li>
<li><a href="#">WOMEN</a>
</li>
<li><a href="#">PAST ADS</a>
</li>
<li><a href="#">SALES</a>
</li>
<li><a href="#">SHOWS</a>
</li>
<li><a href="#">NEWS</a>
</li>
<li class="end"><a href="#">CONTACT</a>
</li>
</ul>
</nav>
<div id="main">
<article>
<h1>Welcome</h1>
<p>Proin a risus id diam feugiat pulvinar blandit a lorem. In nec nibh eros. Morbi vitae quam sit amet quam euismod posuere ullamcorper a velit. Nullam blandit nulla lectus, sit amet gravida eros rhoncus id. Duis at efficitur nisi, sit amet aliquet
leo. Nam dolor enim, malesuada non sollicitudin eget, tempus ut nisi. Cras tellus tellus, volutpat nec nibh non, aliquet malesuada eros. Aenean placerat feugiat dolor at egestas. Aenean vulputate sapien eu erat semper tincidunt. Morbi sodales
sit amet dolor vitae malesuada. Quisque vel dolor vel massa sollicitudin finibus. Nullam pharetra interdum nisi nec viverra. Aliquam in dolor efficitur, volutpat lorem ac, sodales erat. Donec id rhoncus quam.</p>
<p>Nam laoreet sodales condimentum. Aliquam velit nunc, volutpat quis erat a, imperdiet vehicula eros. Suspendisse potenti. Phasellus diam libero, hendrerit nec mauris ac, sodales scelerisque eros. Aliquam luctus neque sed turpis tristique, in feugiat
velit ultricies. Phasellus efficitur, velit eget lacinia accumsan, ipsum lacus posuere ipsum, quis elementum augue augue quis risus. Duis laoreet, turpis vel consequat tempor, tortor odio mollis orci, nec ultrices ex sem eu erat. Cras faucibus,
libero sit amet viverra ultrices, elit enim imperdiet dui, ut blandit urna leo eu turpis. Quisque feugiat imperdiet efficitur. Sed finibus tortor at bibendum eleifend. Phasellus ornare venenatis leo non tincidunt.</p>
</article>
<div id="sidebar">
<ul>
<li>
<ul class="newslist">
<li>
<h4>Upcoming Sale</h4>
<p>Join us at the sale</p>
</li>
</ul>
<ul class="newslist">
<li>
<h4>Thank You</h4>
<p>Ladies and Gentlemen</p>
</li>
</ul>
<ul class="newslist">
<li>
<h4>Latest Catalogue</h4>
<br>
<p>View the catalogue</p>
</li>
</ul>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<footer>
<p><a href="#" target="_blank">Text Here</a>
</p>
</footer>
答案 1 :(得分：0)
如果您希望两列或更多列的高度相等（即最长列的高度），我提倡使用以下方法：
<强> CSS
.eq-col-group {
overflow: hidden;
}
.eq-col {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
<强> HTML
<div id="container">
<!-- etc. -->
<div class="eq-col-group">
<div id="main" class="eq-col">
<!-- etc. -->
</div>
<div id="sidebar" class="eq-col">
<!-- etc. -->
</div>
<div class="clear"></div>
</div>
<!-- etc. -->
</div>
这就是称为"One True Layout" method的技巧，请参阅此CSS-Tricks article，了解不同等级列高度的摘要＆＃39;方法
此技术的归属作者（上面的链接）指出32767px的值是旧版Safari浏览器支持的最大值，否则较小的值足以满足预期列高度的用例要小一点（但你也可以留在32767px）。
基本上，容器元素.eq-col-group假定最大列的内容的高度。每个单独的.eq-col列至少32767px高，无论它是否包含子元素，但您不会看到多余的，因为overflow: hidden剪辑容器元素{{1}在最大列的最后一个元素之后。
我建议根据Don-t-tt-Repeat-Yourself的原则封装这个逻辑，将这些规则放在他们自己适当命名的类中，以便重用和更好地审查HTML。
注意：这种方法很棒，因为它适用于传统的IE浏览器（如IE 8），其中基于CSS3属性的其他方法不会。