HTML fullscreenlayout最小寬度，最大寬度

我有一個項目（例如一個div標籤，它佔用了1/3的屏幕寬度，最小寬度爲500px，最大寬度爲700px。除此之外，還有另外一個項目需要佔用屏幕的其餘部分，如果我只分配了66％的寬度，只要另一個項目的高度不佔用最大值之一就可以正常工作，此時發生溢出或項目只是讓出空間。HTML fullscreenlayout最小寬度，最大寬度

誰，這是通過HTML沒有建立一個過於複雜的JavaScript腳本來完成？

最好的問候，斯特凡

任何想法210

編輯代碼：這應該提供一個簡單的例子，只要網站低於500px，兩者都是屏幕的50％，但如果它變大，右側（標有世界）應該填寫超過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>

Demo | FullScreen

來源

2011-06-22 Stefan

這將有助於如果您可以發佈您正在使用的任何css代碼。此外，您正在使用的HTML代碼將幫助我們找出問題。 –

希望這可以讓它更清晰，它儘量保持它儘可能簡單 – Stefan

對於我的生活，我沒有看到一個最小寬度設置在左div（或最大寬度700px – symlink

可能重複：Make a div fill the remaining screen space

和另： How to make a div to fill a remaining horizontal space (a very simple but annoying problem for CSS experts)

編輯： 看我沒有用我剛纔所提供的解決方案之一：

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

jsFiddler Code|jsFiddler FullScreen

來源

2011-06-22 08:25:29 Dementic

否，都aren '我在找什麼 – Stefan

我可能會理解你錯了，我會再次調整我的答案， – Dementic

問題是，我的最大寬度/高度不會始終生效。所以你的帖子並沒有錯，他們有時會解決我的問題，但大多數時候我只是想使用百分比的佈局.....所以我不會繞過一些JavaScript代碼....我會發布當我解決它時！ – Stefan

HTML fullscreenlayout最小寬度，最大寬度

回答

相關問題