具有最小宽度、最大宽度的 HTML 全屏布局答案

【问题标题】：HTML fullscreenlayout with min-width, max-width具有最小宽度、最大宽度的 HTML 全屏布局
【发布时间】：2011-06-22 22:08:19
【问题描述】：

我有一个项目（例如，一个 div 标签，它占用屏幕宽度的 1/3，最小宽度为 500 像素，最大宽度为 700 像素。除此之外，还有另一个项目占用了屏幕的其余部分屏幕。如果我只分配 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

【问题讨论】：

如果您可以发布您正在使用的任何 CSS 代码，将会有所帮助。此外，您使用的 html 代码将帮助我们解决问题。
希望这能让它更清楚，它试图让它尽可能简单
在我的一生中，我没有看到左侧 div 设置了最小宽度（或 700 像素的最大宽度

标签： html css

【解决方案1】：

可能重复：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

【讨论】：

我可能理解错了。我会再次正确调整我的答案。
问题是，我的最小、最大宽度/高度并不是一直生效。所以你的帖子并没有那么错，它们有时会解决我的问题，但大多数时候我只想使用百分比作为布局......所以我不会出现一些 JavaScript 代码......我会发布当我解决它时！