Question

有点卡在一个小问题上试图在左上角使用带有背景图像的div [徽标]不确定如何完成这个....因为可变宽度不依赖于百分比宽度..即

div的最大宽度为1200px
div的最小宽度为900px

当有人调整浏览器大小时，我需要根据视口大小扩展或收缩div。

关于我如何做到这一点的任何想法[这可能没有javascript？]？

更新

这就是我所要做的 - 在我点击IE7之前，似乎在大多数浏览器中运行良好。

    <div id="viewport" class="[[*layout]]">

<div id="contentwrapper">

        <div class="wrapper logo">

            <div id="header">
                [[$TopNav]]
            </div>

            <div id="content" class="homepage">
                [[!If? &subject=`[[*id]]` &operator=`==` &operand=`1` &then=`[[$HomePageTpl]]` &else=`[[$DefaultPageTpl]]` ]]
            </div>

        </div>

</div>

<div class="wrapper footer">

    <div id="footer">

        <div id="footnav">[[$FootNav]]</div>

        <div id="copyright">[[$Copyright]]</div>

        <div id="news-feed">[[$NewsFeed]]</div>

    </div>  

</div>

    div {border: 1px dotted #ccc;}

div#viewport {width:100%;float:left;min-height:100%;position:relative;background-color:#000000;}

div#contentwrapper {width:100%;float:left;background-color:#ffffff;margin-top:8px;}

div#content, div#footer, div#header {float:right;width:900px;padding-left:100px;}

div#header {} 

.wrapper {
    margin:0 auto;
    height:150px;
    width:100%;
    max-width:1110px;
    min-width:1060px;
    text-align:left;
    }
.wrapper.logo {
    background:transparent 
    url(/assets/images/layout/anderson-lyall-consulting-group-logo.png) no-repeat left top;
    }

div#topnav {width:900px;float:right;margin:0 auto;border:1px solid #cc0000;}

Answer 1

CSS为这些场景提供了2个属性，这些属性在IE7 +中起作用：

min-width：https://developer.mozilla.org/en/CSS/min-width
max-width：https://developer.mozilla.org/en/CSS/max-width

这可能就是您要找的，您可以先将宽度设置为100％，然后添加最小/最大宽度来控制它。

Answer 2

对于现代浏览器上的no-js解决方案，您可以使用CSS媒体查询，如此

@media screen and (max-width: 1199px) {
   div { width: 900px; }
}

@media screen and (min-width: 1200px) {
   div { width: 1200px; }
}

这会自动调整div的大小，具体取决于您的窗口宽度，而不是内容。媒体查询支持：http://caniuse.com/css-mediaqueries

一个简单的概念验证演示

<html>
    <head>
        <style>
        div { margin: 0 auto; border: 1px red solid }
        div:after { display: block; }

        @media screen and (max-width: 1199px) {
           div { width: 900px; }
           div:after { content: " max-width is 1199px" }
        }

        @media screen and (min-width: 1200px) {
           div { width: 1200px; }
           div:after { content: " min-width is 1200px" }
        }
    </style>
    </head>

    <body>
        <div>Resize your browser</div>
    </body>
</html>

使用像素最小和最大宽度的可变宽度DIV？

2 个答案: