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

有点卡住了一个小问题，试图使用一个背景图像在左上角的div[一个标志]不知道如何做到这一点....由于可变宽度不依赖于百分比宽度…例如

div的最大宽度是1200pxdiv的最小宽度是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;}

CSS有两个属性，适用于IE7+:

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

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

对于现代浏览器的无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>

相关内容

最新更新

热门标签：