HTML全屏幕布局，最小宽度，最大宽度

本文介绍了HTML全屏幕布局，最小宽度，最大宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个项目（例如div标签，占屏幕宽度的1/3，最小宽度为500px，最大宽度为700px。除此之外，还有一个项目，其余的如果我只是分配一个66％的宽度，它工作正常，只要其他项目的高度不采取最大值之一，在这一点溢出发生或该项目只是让空间。

I have a item (e.g. a div tag, which takes 1/3 of the screen-width and has a minimum width of 500px and a maximum width of 700px. Beside it, there is another item which takes the rest of the screen. If I just assign a width of 66% it works fine as long as the height of the other item does not take one of the max values, at which point an overflow happens or the item just lets space out.

没有构建过于复杂的javaScript脚本，而通过html完成的任何想法？

Any ideas who this is done by html without building an overly complex javaScript script?

最好问候，
Stefan

best Regards,Stefan

编辑代码：
这个例子提供了一个简单的例子，只要网站在500px以下，都是屏幕的50％，但如果它得到较大，右侧（标记为世界）应填写超过50％。

Edit Code:This sould provide a simple example, As long as the site is under 500px, both are 50% of the screen, but if it gets larger, the right side (marked with world) should fill out more than 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>

推荐答案

可能重复：

EDIT：
查看我使用之前提供的解决方案之一：

Look what i did using one of the solutions i provided earlier:

<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;
}

这篇关于HTML全屏幕布局，最小宽度，最大宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！