HTML全屏布局,最小宽度,最大宽度

时间:2011-06-22 06:18:11

标签: html css

我有一个项目(例如div标签,它占据屏幕宽度的1/3,最小宽度为500px,最大宽度为700px。除此之外,还有另一个项目需要剩下的如果我只指定了66%的宽度,只要另一个项目的高度没有采用其中一个最大值,就可以正常工作,此时会发生溢出或者项目只是让空间出来。

这些是由html完成而没有构建过于复杂的javaScript脚本的想法吗?

最好的问候, 斯蒂芬

编辑代码: 这可以提供一个简单的例子,只要网站低于500px,两者都是屏幕的50%,但如果它变大,右侧(标有世界)应填写超过50%。

<html>
<head>
    <style type="text/css">
        * {
            border: 1px solid black;
        }

        html,body,.fullheight {
            height: 99%;
            width: 99%;
        }

        table {
            table-layout: auto;
        }
        .minfield {
            max-width: 250px;
            border: 1px solid red;
            overflow: hidden;
        }

        .leftfloat{
            float: left;
        }

        .maxsize{
            height: 99%;
            width: 49%;
        }
    </style>    
</head>

<body>
    <div class="fullheight">
        <div class="leftfloat minfield maxsize">
            <p>hello</p>
        </div>
        <div class="leftfloat maxsize">
            <p>world</p>
        </div>
    </div>
</body>

Demo | FullScreen

1 个答案:

答案 0 :(得分:2)

可能重复:Make a div fill the remaining screen space

和另一个: How to make a div to fill a remaining horizontal space (a very simple but annoying problem for CSS experts)

修改 看看我之前使用我之前提供的解决方案做了什么:

<html>  
    <body>     
        <div class="fullHeight">             
            <div class="minField maxSize"><p>hello</p></div>             
            <div class="maxField maxSize"><p>World</p></div>     
        </div> 
    </body>  
</html>

* {             
    border: 1px solid black;         
} 
html,body,.fullHeight {             
    height: 99%;             
    width: 99%;         
} 

.maxSize{             
    height: 99%;                  
} 
.minField{                     
    float:left;
    width:250px; /* This is a must so you could define min/max */  
    max-width:250px;
    width: expression(this.width > 250 ? 250: true); /* IE Hack for max-width */

    background-color:#ff0000;             
}             
.maxField {                     
    margin-left: 250px;        
    background-color:#00FF00;             
}

jsFiddler Code | jsFiddler FullScreen