Question

我设计了一个包含页眉和页脚以及正文标记的页面。对于页眉和页脚我设置宽度：100％;我设置了一个最小宽度：1024px;在Firefox和IE它运行良好，当最小化窗口时，它保持其最小尺寸，但在googlechrome minwidth不起作用，当我最小化窗口页眉和页脚只有窗口的宽度，当我滚动到右边有白色空间和它并没有延伸100％，但对于内容，一切都很好。我在这里放了一些html和css代码。

<div id="f-page">
  <div style="width:100%; min-width:1024px; z-index:800;
   background-image:url(fimages/headerbg.gif); height:120px;"> 
   <center>
    <div id="f-header"></div>
   </center>
   </div>
   <div id="f-mypage"></div>
    <div id="f-footer">
     <center>
    <br />
    <h6> some text</h6>
     </center>            
</div>
</div>

CSS：

#f-footer
        {
           height:70px;  min-width:1024px;
           background-image:url('../f-images/ffoot.png');
           background-repeat:repeat-x;
        }
#f-header {width:1024px;height:120px;z-index:1000;}
#f-page {margin:0 auto;}
#f-mypage
        {
          width:1004px;height:auto; background-color:White; margin-top:10px;
          padding-bottom:30px;border:1px solid #cccfcb;
          -moz-box-shadow:5px 0 5px -5px #333,-5px 0 5px -5px #333;
          -webkit-box-shadow:5px 0 5px -5px #333,-5px 0 5px -5px #333;
          box-shadow:5px 0 5px -5px #333,-5px 0 5px -5px #333; 
        }

谢谢你的帮助。

Answer 1

最小宽度在chrome中正常工作。

也许你需要在背景设置才能看到效果：

 #f-footer
    {
      height:70px;  min-width:1024px;
         background-image:url('../f-images/ffoot.png'); background-repeat:repeat-x;
      background: red;
    }

工作小提琴： http://jsfiddle.net/basarat/uPTSd/

css min-width在谷歌浏览器中不起作用

1 个答案: