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

有点卡在一个小问题试图使用一个背景图像在左上角的[div]不知道如何完成这个....因为可变宽度不依赖于百分比宽度...即使用像素最小和最大宽度的可变宽度DIV？

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

当有人重新调整他们的浏览器我需要一个div来扩大或根据视口尺寸合同。

任何想法如何我可以做到这一点[这可能没有JavaScript？]？

UPDATE

这是我得到了 - 似乎在大多数浏览器很好地工作，直到我打了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;}

来源

2012-01-04 Sean Kimball

CSS有2个属性那些从IE7 +工作的场景被称为：

最小宽度：https://developer.mozilla.org/en/CSS/min-width
最大宽度：https://developer.mozilla.org/en/CSS/max-width

这可能是你在找什么，你可以先设置宽度为100％，然后添加最小/最大宽度来控制它。

来源

2012-01-04 16:53:23 leopic

我以为那些2个属性都依赖于内容 - 而不是视口。我会尝试100％的宽度。 – 2012-01-04 16:58:28

只要内容可以增长（基于％），您可以设置最小和最大宽度（以像素为单位）。 – leopic 2012-01-04 17:08:11

它主要工作，是的。但我忽略了提到div需要被集中。 – 2012-01-04 17:13:11

有关现代的浏览器可以使用CSS媒体查询，像这样

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

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

这将自动调整div这取决于你的窗口的宽度并没有对内容无JS的解决方案。媒体查询支持：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>

来源

2012-01-04 16:54:44 fcalderan

我有 - 它确实工作是一个很好的答案 - 但IE 7和8的支持不适用于媒体查询。 – 2012-01-04 17:42:24

这是一个没有js的解决方案，正如你所问。对于较老的IE，考虑总是通过js（取决于onload事件的window的innerWidth）或静态设置宽度为900px或1200px。它可能是一种可接受的优雅退化 – fcalderan 2012-01-04 17:45:32

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

回答

相关问题