Css Div将无法正确扩展_Css_Html

Css Div将无法正确扩展

css html

Css Div将无法正确扩展,css,html,Css,Html,我有一个页面，用左边的div创建，中间包含IFRAME和div，也包含iFrAM. 侧边栏用于保存链接，而内容部分用于加载所述链接我的目标是将侧边栏一直扩展到页面底部以及内容部分这是我的css： html, body { height:100%; margin:0px; padding:0px; } #wrapper { position: relative; min-height: 100%; } #sidebar { position:

我有一个页面，用左边的div创建，中间包含IFRAME和div，也包含iFrAM.

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

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

这是我的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个不同的网站，我一辈子都找不到它

从你的问题中我可以理解，（）应该会起作用

CSS HTML



导航条
更多导航

内容

显然，这是一个非常简单的示例，如果需要，您应该给出元素类或ID；我想保持简单

其原理是一个

float:left

、一个

边距left:150px

和一些

背景色

属性。您可以为容器

div

提供一个背景色，该背景色可以是您希望侧边栏显示的颜色，然后将内容

div

s背景设置为白色，或者设置为您希望的颜色

导航栏

ul

的

float:left

表示主要内容被推回顶部

左边距：150px

给出内容左侧的导航栏150px，以便展开。显然，您应该将其更改为导航栏的宽度。

您可以将两个包含div的最小高度都设置为100%，无需执行更多操作：

你也可以给iFrame一个100%的高度，但我不清楚你是否需要它。

我需要在内容区（它包含pdf文件）和边栏中使用iFrame。。我只需要一个地方来放置保存在另一个文件中的链接（我有一个python脚本，可以扫描目录中的文件并将文件名加载到另一个文件中）。我已经做了服务器端包括，但那是。。好啊无论哪种方式，我都需要看更多的帧。但是对于放置侧边栏还有什么其他建议吗？我已经试用了你的css和html，它似乎工作得很好。但底部有一个很小的空白：我以前遇到过这个问题，我不记得如何修复它……我看不到小提琴（Chrome）上的空白。除了边境。为了演示，我给了div一个边框，但是因为100%的宽度只设置在内部区域，所以他们真的不应该有边框。任何边框、填充和边距都会使这些div大于100%，也许你应该检查iframe的HTML5

seamble

属性。对不起，没有早点回来。这就是我最后要做的。我刚刚摆脱了拿着iFrame的Div，自己设计了iFrame。顺便说一下，我只是随机选择了两个站点，我知道这两个站点可以放在两个框架中，不会有太多溢出。不管怎样。谢谢你的建议！！

div
{
    background: black;
}

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

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

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

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