我遇到了一个长期存在的问题，即让两列的内容高度不均匀来填充它们的父容器，并且它们的长度相同，而与它们的内容无关，这会有所不同。我知道这方面的一些技巧，例如在父对象上使用垂直平铺的背景图像来模拟列，但我也希望列上的圆 Angular 以及它们的颜色不同。
父对象的高度由最高的“子”列的高度决定，这很好，但垂直较小的列的背景缩小到其内容的大小，使其背景比背景容器短。在此示例中，我将通常不可见的背景对象涂成黑色以提高可见性，并希望左侧较大的蓝色柱垂直填充该区域。在蓝色列更高的情况下，我希望发生相反的情况，黄色列填充黑色父对象。
我已将布局简化为最简单的形式来演示问题，随后是代码和图像。
CSS:
html {
height: 100%;
width: 100%;
}
body {
margin: 0px;
padding: 0px;
background-color: rgb(0,50,130);
position: relative;
}
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
text-align: left;
margin: 0px;
border: none;
padding: 0px;
}
/*auto-centering outer container box*/
.outer {
margin: 0px auto;
width: 960px;
text-align: center;
position: relative;
}
.top {
width: 960px;
height: 150px;
background-color: rgb(255,0,0);
border-radius: 6px;
}
.mid {
width: 960px;
float: left;
height: 100%;
margin-top: 35px;
background-color: rgb(0,0,0);
}
.midmain {
width: 710px;
height: 100%;
background-color: rgb(0,0,255);
float: left;
border-radius: 10px;
padding: 20px 20px 30px 20px;
margin-right: 6px;
}
.midside {
width: 180px;
height: 100%;
background-color: rgb(255,225,0);
float:right;
border-radius: 6px;
padding: 10px 10px 10px 10px;
}
/*Text rules for midside*/
.nav {
width: 180px;
}
.nav a, nav a:link{
display: block;
width: 178px;
height: 28px;
background-color: blue;
border: 1px solid rgb(0,20,100);
padding: 10px 0px 0px 0px;
margin-top: 0px;
margin-bottom: 10px;
border-radius: 6px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
color: white;
text-decoration: none;
}
.nav a:hover {
color: black;
background-color: white;
border: 1px solid rgb(128,0,0);
margin-top: -2px;
margin-bottom: 12px;
}
.bot {
width: 960px;
height: 100px;
float: left;
background-color: rgba(255,255,0,0.5);
margin-top: 10px;
margin-bottom: 20px;
border-radius: 6px;
box-shadow: 2px 2px 3px 3px rgba(0,20,60,0.3);
}
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Columns</title>
<link href="styles/col.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="outer">
<div class="top">
</div>
<div class="mid">
<div class="midmain">
Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
</div>
<div class="midside">
<div class="nav">
<a href="/home.aspx">Home</a>
<a href="/news.aspx">News</a>
<a href="/edu.aspx">Contact</a>
<a href="/board.aspx">About</a>
<a href="/staff.aspx">Staff</a>
<a href="/hist.aspx">Gallery</a>
<a href="/sport.aspx">Video</a>
<a href="/footy.aspx">Links</a>
</div>
</div>
</div>
</div>
</body>
</html>
如有任何建议或帮助，我们将不胜感激!
谢谢， 千瓦
最佳答案
在您的 css 中更改以下定义:
.mid {
width: 960px;
float: left;
margin-top: 35px;
background-color: rgb(0,0,0);
position:relative;
}
.midmain {
position:absolute;
width: 710px;
min-height: calc(100% - 50px);
background-color: rgb(0,0,255);
border-radius: 10px;
padding: 20px 20px 30px 20px;
margin-right: 6px;
}
.midside {
width: 180px;
float:right;
background-color: rgb(255,225,0);
border-radius: 6px;
padding: 10px 10px 10px 10px;
}
对于绝对定位，子元素的高度是相对于其父元素定义的。
如果您不喜欢 min-height: calc(100% - 50px); 样式，您可以使用以下代码代替它。它会产生相同的效果:
top:0;
bottom:0;
关于html - 使圆形的彩色柱子具有相同的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32780501/