关于样式的问题

为什么绿色的框不能够达到100%，就是要和外层的红色的框一样长，红色的框使用了最大宽度。<html>
<head>
    <style>
        DIV.outLine
        {
            min-width: 240px;
            max-width: 100%;
            margin: 0px;
            width: 240px;
            max-height: 320px;
            position: absolute;
            border-collapse: collapse;
            border: solid 1px red;
            clear: both;
        }
        .header
        {
            height: 18pt;
            float: left;
            width: 100%;
            border: solid 1px green;
        }
    </style>
</head>
<body>
    <div class="outLine">
        <div class="header">
            Wayland
        </div>
        <div id="breadcrumbDiv">
            <div class="bc">
                dddddddddddddddddddddddddddddddddddddddddddddd
        </div>
    </div>
</body>
</html>

解决方案 »

  1.   

    <html>
    <head>
        <style>
            DIV.outLine
            {
                min-width: 240px;
                max-width: 100%;
                margin: 0px;
                width: 240px;
                max-height: 320px;
                position: absolute;
                border-collapse: collapse;
                border: solid 1px red;
                clear: both;
                float: left;
            }
            .header
            {
                height: 100%;
                float: left;
                width: 50%;
                border: solid 1px green;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="outLine">
            <div class="header">
                Wayland
            </div>
            <div id="breadcrumbDiv" style="float: right;width:50px;overflow:hidden;">
                <div class="bc">
                    dddddddddddddddddddddddddddddddddddddddddddddd
                </div>
            </div>
        </div>
    </body>
    </html>
      

  2.   

    <html>
    <head>
        <style>
            DIV.outLine
            {
                min-width: 240px;
                max-width: 100%;
                margin: 0px;
                width: 240px;
                max-height: 320px;
                position: absolute;
                border-collapse: collapse;
                border: solid 1px red;
                clear: both;
            }
            .header
            {
                height: 18pt;
                width: 100%;
                border: solid 1px green;
            }
        </style>
        <script type="text/javascript">
            function adjustW() {
                var h = document.getElementById("header");
                var w = document.getElementById("breadcrumbDiv");debugger;
                h.style.width = w.offsetWidth;
            }
        </script>
    </head>
    <body onload="adjustW()">
        <div class="outLine">
            <div class="header" id="header">
                Wayland
            </div>
            <div id="breadcrumbDiv">
                <div class="bc">
                    dddddddddddddddddddddddddddddddddddddddddddddd
                </div>
            </div>
        </div>
    </body>
    </html>