Question

我想要创建一个页面，左边的div包含一个iframe，中间的div也包含一个iframe。

侧边栏用于保存链接，内容部分用于加载所述链接。

我的目标是将侧边栏一直扩展到页面底部以及内容部分。

这是我的css：

html, body {
    height:100%;
    margin:0px;
    padding:0px;
}

#wrapper {
    position: relative;
    min-height: 100%;
}

#sidebar {
    position: relative;
    float:left;
    width: 150px;
    overflow: hidden;
    min-height: 100%;
}

#pdfholder {
    float: right;
width: 600px;
}

这是我的HTML：

<body>
    <div id="wrapper">
        <div id="sidebar">
            <iframe id="sidebarframe" name="index" src="./sidebar.html">
            </iframe>
        </div>

        <div id="pdfholder">
            <iframe id="pdfholderframe" name="viewer" src="./blank.html">
            </iframe>
        </div>
        <div style="clear: both;"></div>
    </div>
</body>

我知道我做错了什么但是我经历了大约10个不同的网站，我不能为我的生活找到它！

Answer 1

你可以给两个包含div的最小高度为100％，并且你需要做的事情不多： http://jsfiddle.net/GolezTrol/eHMec/

你也可以给iframe带来100％的高度，但是我不清楚你是否需要它。

Answer 2

从我的问题中我可以理解，this JSFiddle（simpler version here）应该可以解决问题。

CSS

div
{
    background: black;
}

div div
{
    margin-left: 150px;
    background: white;
}

div ul
{
   float: left;
    color: white;
}

HTML

<div>
    <ul>
        <li>Nav bar</li>
        <li>More nav</li>
    </ul>

    <div>
        Content
    </div>
</div>

显然这是一个非常简单的例子，如果需要你应该给你的元素类或ID;我想保持简单。

这个原则是float: left，margin-left: 150px和一些background-color属性。您为容器div提供了一个背景颜色，可以将侧边栏的颜色设置为，然后将内容div的背景设置为白色或任何您想要的 >待。

导航栏float: left的{{1}}表示主要内容被推回到顶部。

ul会将内容左侧的导航栏150px展开。显然你应该把它改成导航栏的宽度。

Div不会正常扩展

2 个答案:

CSS

HTML