a web page layout_问答_开发者_运维开发者技术经验分享

I am build a page,however I meet some layout related probelms,I can not make the div ajust its size(acutally the height) automatically. See the following markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <title>Link one</title>

        <style type="text/css">
            div#middle{
                margin-top: 5px;
                margin-bottom: 5px;
            }
        </style>
    </head>

    <body>
        <div style="background-color: gray;border: solid 1px red" id="top">
            <h1>Top<h1>
        </div>

        <div style="border: solid 1px blue;min-height: 200px" id="middle">
            <div id="leftmenu" style="float: left;background-color:gray;width: 190px">
                <ul>
                    <li><a href=''>Link One</a></li>
                    <li><a href=''>Link Two</a></li>
                <ul>
 开发者_运维技巧           </div>

            <div id="content" style="background-color: black;margin-left: 200px">
                I am in Link One
            </div>
        </div>

        <div style="background-color: gray" id="foot">
            <hr/>
            <p>Copyright xxx</p>
        </div>
    </body>
</html>

Note the div whose id is "middle",I have to set its height manually,if not the div below it (div with id "foot")will not displayed below it. The foot div will go to the same line with "middle" div,just remove the "min-height: 200px" of "middle" div for a test.

And since the content is not sure,so I can not set its size manually,I just want to the height of the middle div to be the larger height of "leftmenu" or "content".

Any ideas?

-----------------------------------------

a web page layout

It does not expand ,

You are not clearing your floats. Add this line <div style="clear:both;"></div> below the the div with id=content

<div style="border: solid 1px blue;min-height: 200px" id="middle">
            <div id="leftmenu" style="float: left;background-color:gray;width: 190px">
                <ul>
                    <li><a href=''>Link One</a></li>
                    <li><a href=''>Link Two</a></li>
                <ul>
            </div>

            <div id="content" style="background-color: black;margin-left: 200px">
                I am in Link One
            </div>
            <div style="clear:both;"></div>
        </div>

It does this because of the flow of the page. The flow is the order of the elements on your page. So in your example, your li elements are placed one after the other so the first one will appear before the second one on your page. The same applies to all elements, <a>, <div>, <p>, <img> and also text. When an element is floated it is taken out of the flow and elements that follow it are pushed up next to it; this way you can have text flowing around an image or links lined up next to each other.

Unfortunately when you float all elements within another element (as you have done with #leftmenu and #content) the parent element (#middle) acts as if it contains nothing because it has no child elements in the flow and acting as if it was essentially empty. By adding a clearing <div> we are creating a child element in the flow right below everything else and the parent element can then calculate the correct height.

I hope I explained that well enough.

The float:left is causing the issue. You need to insert a clearing element within middle.

    <div style="border: solid 1px blue;min-height: 200px" id="middle">
        <div id="leftmenu" style="float: left;background-color:gray;width: 190px">
            <ul>
                <li><a href=''>Link One</a></li>
                <li><a href=''>Link Two</a></li>
            <ul>
        </div>

        <div id="content" style="background-color: black;margin-left: 200px">
            I am in Link One
        </div>
        <div style="clear:both"></div>
    </div>

JS Fiddle demo

Use a background-image to fake equal column height.

Check this article:

http://www.alistapart.com/articles/fauxcolumns/

For clearing use this class:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

like this

<div style="border: solid 1px blue;min-height: 200px" id="middle" class="clearfix">

a web page layout

精彩评论

关注公众号

热门标签

图文推荐

a web page layout

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：