Html 使div跨度垂直于所有可用高度_Html_Css

Html 使div跨度垂直于所有可用高度

html css

Html 使div跨度垂直于所有可用高度,html,css,Html,Css,红色和绿色div彼此对齐。如何使红色div与绿色div的高度相同？这是一个问题-因为要使高度相同，您需要在文档与红色和绿色div之间添加div，此div必须定义高度，因此您可以将内部两个div的高度设置为100%例如 <div style="height: [must be defined]"> <div id="red" style="height: 100%; ..."> ... </div> <div id="green" style=

红色和绿色div彼此对齐。如何使红色div与绿色div的高度相同？

这是一个问题-因为要使高度相同，您需要在文档与红色和绿色div之间添加div，此div必须定义高度，因此您可以将内部两个div的高度设置为100%例如

<div style="height: [must be defined]">
   <div id="red" style="height: 100%; ..."> ... </div>
   <div id="green" style="height: 100%; ..."> ... </div>
</div>
<div id="black" style="height: 100%; ..."> ... </div>


... 
... 
...

但是-当一个div高于另一个div时，这将中断-使用溢出修复它

PS.在某些情况下，在这里使用表格是很好的，因为表格单元格的高度总是相同的

您应该有一个包含两个元素的div，并且是

让绿色容器向右浮动：

.green {
  float: right;
  width: 50%;
}

然后定位绝对红色，让它知道它应该使用包装器的所有空间：

.wrapper {
  /* remember this is clearfixed */
  position: relative;
}

.red {
  position: absolute;
  left: 0;
  width: 50%;
  top: 0;
  bottom: 0;
}

请注意，只有当绿色容器大于左侧容器时，这种情况才有效。

您可以使用表作为包装器。第一个和最后一个tr是可选的。但是，如果您需要第一个或最后一个tr，那么设置一个高度。浏览器需要它来计算中间tr的正确高度

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    html, body {height:100%; padding:0; margin:0;}
    #wrapper {height:100%;width:100%;border-collapse:collapse;}
    #wrapper td {vertical-align:top;}
    #wrapperFirst, #wrapperLast {height:1px;}
</style>
<body>
    <table id="wrapper">
        <tr><td id="wrapperFirst" style="background-color: #ff44ff;">foo top</td></tr>
        <tr><td style="background-color: #ffff44;">text</td></tr>
        <tr><td id="wrapperLast" style="background-color: #44ffff;">foo bottom</td></tr>
    </table>

</body>
</html>


html，正文{高度：100%；填充：0；边距：0；}
#包装{高度：100%；宽度：100%；边框折叠：折叠；}
#包装器td{垂直对齐：顶部；}
#wrapperFirst，#wrapperLast{高度：1px；}
福托普
文本
foo-bottom

能否添加当前的HTML/CSS？A也会有帮助。

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    html, body {height:100%; padding:0; margin:0;}
    #wrapper {height:100%;width:100%;border-collapse:collapse;}
    #wrapper td {vertical-align:top;}
    #wrapperFirst, #wrapperLast {height:1px;}
</style>
<body>
    <table id="wrapper">
        <tr><td id="wrapperFirst" style="background-color: #ff44ff;">foo top</td></tr>
        <tr><td style="background-color: #ffff44;">text</td></tr>
        <tr><td id="wrapperLast" style="background-color: #44ffff;">foo bottom</td></tr>
    </table>

</body>
</html>