CSS：如何将高度100%并排跳水？_Css_Html_Iframe

CSS：如何将高度100%并排跳水？

css html iframe

CSS：如何将高度100%并排跳水？,css,html,iframe,Css,Html,Iframe,我正在尝试创建一个并排的两个div，它将100%填满我的屏幕。左div包含一些菜单，右div包含内容。以下是我目前掌握的代码：。目前的问题是高度只和我最小的div的内容一样大。因此，在本例中，右栏中的iframe大于左栏中的菜单项；但是，高度仅限于左divs内容，而不是右divs内容。有什么想法吗？谢谢代码 <div> <div class="table"> <div class="innerLeft"> &l

我正在尝试创建一个并排的两个div，它将100%填满我的屏幕。左div包含一些菜单，右div包含内容。以下是我目前掌握的代码：。目前的问题是高度只和我最小的div的内容一样大。因此，在本例中，右栏中的iframe大于左栏中的菜单项；但是，高度仅限于左divs内容，而不是右divs内容。有什么想法吗？谢谢

代码

<div>
    <div class="table">
        <div class="innerLeft">
            <span>Left Column</Span>
        </div>

        <div class="innerRight">
            <span>Content with Iframe</span>
        </div>
    </table>
</div>

最短的解决方法是使用适当的表格，最小高度也可以帮助您，但并非所有浏览器都尊重它。

我多次遇到相同的问题，直到我发现：

这是一个有效的CSS解决方案，使您的立柱共享高度。然后两者都将是最大柱的高度

如果你想让你的柱子填满整个屏幕，你可以使用

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

.innerRight {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    right: 0; 
}

请注意，这是css3，不适用于旧浏览器

css3


html，正文{高度：100%；填充：0；边距：0；}
div.table，div.table*{框大小：边框框；-moz框大小：边框框；-webkit框大小：边框框；}
div.table{宽度：100%；高度：100%；}
div.table div{边框：1px纯黑色；宽度：50%；高度：100%；浮动：左侧；}

html:


左列
满足于Iframe

第页：


html，正文{
身高：100%；
填充：0；
保证金：0；
}
分区表，分区表*{
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
}
分区表{
宽度：100%；
身高：100%；
}
表分区{
边框：1px纯黑；
宽度：50%；
身高：100%；
浮动：左；
}
左列
满足于Iframe

当您希望填充整个屏幕或某个部分时，上面的代码将创建两列

以下代码只能用于填充整个屏幕（使用绝对位置时，容器行为异常，但有解决方法）：


html，正文{
身高：100%；
填充：0；
保证金：0；
}
#左{
宽度：50%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
背景：红色；
}
#对{
宽度：50%；
身高：100%；
位置：绝对位置；
排名：0；
右：0；
背景：蓝色；
}

这能满足您的需求吗


左列
满足于Iframe
.桌子{
显示：块；
}
.innerLeft{
显示：块；
宽度：160px；
背景颜色：浅蓝色；
颜色：黑色；
浮动：左；
}
.右内侧{
显示：块；
宽度：100%；
垂直对齐：顶部；
背景色：红色；
颜色：白色；
}

我认为最好使用绝对值，然后使用固定值，否则页面将无法滚动。遇到了一种情况。。。如果左栏的内容比屏幕大，我现在有两个滚动条在最右边。右侧div的高度仅扩展到屏幕分辨率，而与左侧列的高度不匹配您使用的是哪种解决方案，第一种还是最后一种？另外，您可能需要删除包装

.table

div。

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

.innerRight {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    right: 0; 
}

<style>
html, body{height:100%;padding:0;margin:0;}
        div.table, div.table *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
         div.table{width:100%;height:100%;}
          div.table div{border:1px solid black;width:50%;height:100%;float:left;}
</style>

<div class="table">
    <div class="innerLeft">
        <span>Left Column</Span>
    </div>

    <div class="innerRight">
        <span>Content with Iframe</span>
    </div>
</table>

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {
                height:100%;
                padding:0;
                margin:0;
            }
            div.table, div.table * {
                box-sizing:border-box;
                -moz-box-sizing:border-box;
                -webkit-box-sizing:border-box;
            }
            div.table {
                width:100%;
                height:100%;
            }
            div.table div {
                border:1px solid black;
                width:50%;
                height:100%;
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="table">
            <div class="innerLeft"> <span>Left Column</span>

            </div>
            <div class="innerRight"> <span>Content with Iframe</span>

            </div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>

    <head>
        <style>
            html, body {
                height:100%;
                padding:0;
                margin:0;
            }
            #left {
                width:50%;
                height:100%;
                position:absolute;
                top:0;
                left:0;
                background:red;
            }
            #right {
                width:50%;
                height:100%;
                position:absolute;
                top:0;
                right:0;
                background:blue;
            }
        </style>
    </head>

    <body>
        <div id="left"></div>
        <div id="right"></div>
    </body>

</html>

<div>
    <div class="table">
        <div class="innerLeft">
            <span>Left Column</Span>
        </div>

        <div class="innerRight">
            <span>Content with Iframe</span>
        </div>
    </div>
</div>


.table {

    display: block;

}

.innerLeft {

    display: block;
    width: 160px;    

    background-color: lightblue;
    color: black;
    float:left;
}

.innerRight {

    display: block;
    width: 100%;
    vertical-align: top;

    background-color: red;
    color: white;
}