Div will not expand properly_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-04 15:05 出处：网络

I have a page that I am trying to create with a div on the left containing an iframe and a div in the middle also containing an iframe.

相关专题：css

I have a page that I am trying to create with a div on the left containing an iframe and a div in the middle also containing an iframe.

The sidebar is to hold links and the content section is to load said links.

My goal is to get the sidebar expanded all the way down to the bottom of the page as well as the content section.

Here is my 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;
}

And here is my html:

<body>
    <div id="wrapper">
        <div id="sidebar">
     开发者_如何学JAVA       <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>

I know I am doing something wrong but I have gone through around 10 different websites and I cannot for the life of me find it!

You can give both containing divs a min-height of 100% and there's not much more you need to do: http://jsfiddle.net/GolezTrol/eHMec/

You can give the iframes a height of 100% too, but it didn't become clear to me whether you need that or not.

From what I can understand from your question, this JSFiddle (simpler version here) should do the trick.

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>

Obviously this is a very simple example and you should give your elements classes or IDs if needbe; I wanted to keep it simple.

The principle of this is a float: left, a margin-left: 150px and some background-color properties. You give your container div a background colour of whatever you want the sidebar to be coloured as, and then set the content divs background back to white, or whatever you want that to be.

The float: left for the navbar ul means the main content is pushed back to the top.

The margin-left: 150px gives the navbar 150px on the left of the content to expand into. Obviously you should change this to the width of the navbar.