Html 垂直展开一个div_Html_Css

Html 垂直展开一个div

html css

Html 垂直展开一个div,html,css,Html,Css,我有一个div容器，里面有3个div元素，每个元素都有自己的内容。容器水平居中。我想要三要素舱适合集装箱的高度 <body> <div id="Container"> <div id="A"><P>Some multiROW<br>content</P></div> <div id="B">single row content</div>

我有一个div容器，里面有3个div元素，每个元素都有自己的内容。容器水平居中。我想要三要素舱适合集装箱的高度

<body>
    <div id="Container">
        <div id="A"><P>Some multiROW<br>content</P></div>
        <div id="B">single row content</div>
        <div id="C"><P>Some multiROW<br>content</P></div>
    </div>
</body>


 一些多行
内容
单行内容
 一些多行
内容

在本例中，中间的氰基元素应与其他div具有相同的高度。内容也应该垂直居中。我怎样才能得到它？

试试这个

#Container {
    width: 50%;
    margin: auto;
    overflow: hidden;
    position: relative;
}

#A {
    width: 15%;
    float: left;
    text-align: right;
    background-color: red;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

#B {
    width: 70%;
    float: left;
    text-align: center;
    background-color: aqua;
    margin-bottom: -99999px;
    padding-bottom: 99999px;

}

#C {
    width: 15%;
    float: left;
    text-align: left;
    background-color: yellow;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

参考资料：

试试这个

你是要这个吗

height:auto;

这将使容器自动设置其高度，无论其中有多少个DIV

：编辑：

<style type="text/css">
#container{width:1000px;height:auto;background-color:#CCCCCC;}
#A{width:900px;height:300px;background-color:#00FF00;}
#B{width:900px;height:100px;background-color:#99FFFF;}
#C{width:900px;height:400px;background-color:#CC99FF;}
</style>


#容器{宽度：1000px；高度：自动；背景色：#cccc；}
#A{宽度：900px；高度：300px；背景色：#00FF00；}
#B{宽度：900px；高度：100px；背景色：#99FFFF；}
#C{宽度：900px；高度：400px；背景色：#CC99FF；}

以下内容如何：

（使用表格单元格作为显示属性，中间垂直对齐，高度为100%）


 一些多行
内容
单行内容
 一些多行
内容
#容器{
宽度：50%；
保证金：自动；
显示：表格；
}
#货柜组{
垂直对齐：中间对齐；
显示：表格单元格；
身高：100%；
}
#A{
宽度：15%；
文本对齐：右对齐；
背景色：红色；
}
#B{
宽度：70%；
文本对齐：居中；
背景色：浅绿色；
}
#C{
宽度：15%；
文本对齐：左对齐；
背景颜色：黄色；
}

请在问题中包含您的代码。另外，链接到JSFIDLE时不要使用协作；除此之外，它只是让事情变得更加混乱。（没有人能确定你的代码一开始是什么样子的…）对不起，合作是一种新的想法吗？如何禁用它？？？不要单击“协作”按钮。单击“保存”并在地址栏中共享URL。为什么要使用v边距？我不想要整页的div！该边距将匹配垂直对齐的父div有很多方法，但是如果你想使高度与其他div相同，那么这将是我尝试过但没有成功的好方法，你能在我的示例中演示吗#容器{宽度：1000px；高度：自动；背景色：CCCCCC；}A{宽度：900px；高度：300px；背景色：00FF00；}B{宽度：900px；高度：100px；背景色：99FFFF；}C{宽度：900px；高度：400px；背景色：CC99FF；}我使用背景色只是为了显示差异……但我不知道高度，内容是动态提供的。我提供的高度只是为了演示。。你可以用自己的身高。。或者你甚至可以给他们的高度作为自动如果你想。。。然后，高度将根据您的内容自动调整。但这就是问题所在！我需要A、B和C div的相同未知高度。

<style type="text/css">
#container{width:1000px;height:auto;background-color:#CCCCCC;}
#A{width:900px;height:300px;background-color:#00FF00;}
#B{width:900px;height:100px;background-color:#99FFFF;}
#C{width:900px;height:400px;background-color:#CC99FF;}
</style>

<div id="Container">
    <div id="A"><P>Some multiROW<br>content</P></div>
    <div id="B">single row content</div>
    <div id="C"><P>Some multiROW<br>content</P></div>
</div>

#Container {
width: 50%;
margin: auto;
display:table;
}

#Container div{
    vertical-align:middle;
    display:table-cell;
    height:100%;
}

#A {
    width: 15%;
    text-align: right;
    background-color: red;
}

#B {
    width: 70%;
    text-align: center;
    background-color: aqua;
}

#C {
    width: 15%;
    text-align: left;
    background-color: yellow;
}