最小幅、最大幅のHTMLフルスクリーンレイアウト

divタグ（画面幅の1/3、最小幅500px、最大幅700pxなど）がありますが、画面の残りの部分を取る別の項目があります。もし私がちょうど66％の幅を割り当てれば、他の項目の高さが最大値の1つを取らない限り、それはうまくいきます。アイテムだけでスペースを繰り出す。最小幅、最大幅のHTMLフルスクリーンレイアウト

これは、過度に複雑なJavaScriptスクリプトを構築することなく、HTMLで行われている任意のアイデア？

よろしく、ステファン

編集コード：これは簡単な例です。サイトが500ピクセル未満であれば、どちらも画面の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)

はEDIT： は私が先に提供ソリューションのいずれかを使用しなかったものを見て：

<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

問題は、私がmin-、max-width/heigthをいつも有効にしていないことです。あなたの投稿はそれほど間違っているわけではなく、時々私の問題を解決しますが、レイアウトのためにPercentageを使用したい時がほとんどです。私はいくつかのJavaScriptコードを思いつきません....私は投稿しますそれは私がそれを解決したとき！ – Stefan

最小幅、最大幅のHTMLフルスクリーンレイアウト

答えて

関連する問題