Html 显示的CSS问题：表格_Html_Css

Html 显示的CSS问题：表格

html css

Html 显示的CSS问题：表格,html,css,Html,Css,我已经决定，我不知道我在做什么与我的css 我想要两个div并排显示。左边的div有内容，应该足够大以支持它。右div应占据水平空间的其余部分，并与左div的高度相同第三个div应该位于这两个div的下面，并横跨整个页面我尝试使用表格，但右侧单元格无法扩展到可用的全部高度/宽度。我一直在尝试使用div，将显示设置为table、table row、table cell 由于某种原因，左div一直在水平扩展，而我的右div没有任何空间。我试图指定左div的宽度，但它被忽略了右边的div包含由j

我已经决定，我不知道我在做什么与我的css

我想要两个div并排显示。左边的div有内容，应该足够大以支持它。右div应占据水平空间的其余部分，并与左div的高度相同

第三个div应该位于这两个div的下面，并横跨整个页面

我尝试使用表格，但右侧单元格无法扩展到可用的全部高度/宽度。我一直在尝试使用div，将显示设置为table、table row、table cell

由于某种原因，左div一直在水平扩展，而我的右div没有任何空间。我试图指定左div的宽度，但它被忽略了

右边的div包含由javascript创建的动态内容，因此在呈现时为空

#main {
    display : table;
    width : 100%;
}

.row {
   display : table-row;
   width : 100%;
}

#row2 {
   display : table-row;
   background-color:purple;
}

#right {
    display : table-cell;
    overflow: hidden;
    height: 100%;
    background-color:blue;
}

#left {
    display : table-cell;
    background-color:red;
    width: 100px;
}

<body>
    <div id="main">
        <div class="row">
            <div id="left">
                 Some content
            </div>
            <div id="right"></div>
        </div>
        <div id="row2">
            Some stuff
        </div>
   </div>
</body>

#主{
显示：表格；
宽度：100%；
}
.行{
显示：表格行；
宽度：100%；
}
#第2行{
显示：表格行；
背景颜色：紫色；
}
#对{
显示：表格单元格；
溢出：隐藏；
身高：100%；
背景颜色：蓝色；
}
#左{
显示：表格单元格；
背景色：红色；
宽度：100px；
}
一些内容
一些东西

您的“右”列没有占用任何空间，因为它没有内容。给它点东西，它会的

显然，我的问题源于为我的右div绘制内容的javascript库。除非我明确设置div，否则计算div的高度显然太愚蠢了。谢谢你解决了我的宽度问题。

<div id="main">
    <div class="row">
        <div id="left">
             Some content
        </div>
        <div id="right">&nbsp;</div>
    </div>
    <div id="row2">
        Some stuff
    </div>
</div>

.row {
    display : table;
    width : 100%;
}

#row2 {
   background-color:purple;
}

#right {
    display : table-cell;
    overflow: hidden;
    height: 100%;
    background-color:blue;
}

#left {
    display : table-cell;
    background-color:red;
    width: 100px;
}