CSS自動展開寬度爲表

Question

我建立一個網站，我需要的佈局是這樣的：

+---+--------------+ 
|# |    | 
|n | #page  | 
|a | table.basic | 
|i |    | 
|g |    | 
|a |    | 
|t |    | 
|i |    | 
|o +--------------+ 
|n | #pagination | 
+---+--------------+ 

下面是HTML CSS &：

#navigation { 
 
    float: left; 
 
    width: 150px; /* Fixed size*/ 
 
    min-height: 100%; 
 
    margin: 0; 
 
    padding: 0 2em; 
 
} 
 
#page { 
 
    float: left; 
 
    width: auto; /* Auto size. Something need to be changed here.*/ 
 
    padding-left: 2em; 
 
    vertical-align: top; 
 
} 
 
#pagination { 
 
    font-size: 1.3em; 
 
    position: relative; 
 
    clear: both; 
 
    padding: 0.5em; 
 
    text-align: center; 
 
} 
 
table.basic tr th, 
 
table.basic tr td { 
 
    /* or change something here*/ 
 
    border: 2px solid #000000; 
 
    font-weight: bold; 
 
    margin: 1em 0; 
 
    padding: 1em; 
 
}

<div id="navigation">Show navigation</div> 
 
<div id="page"> 
 
    <table class="basic"> 
 
    <tr> 
 
     <th>id</th> 
 
     <th>text</th> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Long long thing</td> 
 
    </tr> 
 
    </table> 
 
    <div id="pagination">Show pagination</div> 
 
</div>

帶表格的頁面內容需要自動展開，因此它不會在導航欄下浮動。任何想法？

Answer 1

#page不需要浮動，但它需要處理浮動導航。

經典而簡單的方法是使用overflow：hidden ;.這改變了塊的格式化上下文。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

div {/*demo purpose*/ border:solid;} 
 
#navigation { 
 
    float: left; 
 
    width: 150px; /* Fixed size*/ 
 
    min-height: 100%; 
 
    margin: 0; 
 
    padding: 0 2em; 
 
} 
 
#page { 
 
    overflow:hidden; 
 
    padding-left: 2em; 
 
    vertical-align: top; 
 
} 
 
#pagination { 
 
    font-size: 1.3em; 
 
    position: relative; 
 
    clear: both; 
 
    padding: 0.5em; 
 
    text-align: center; 
 
} 
 
table.basic tr th, 
 
table.basic tr td { 
 
    /* or change something here*/ 
 
    border: 2px solid #000000; 
 
    font-weight: bold; 
 
    margin: 1em 0; 
 
    padding: 1em; 
 
}

<div id="navigation">Show navigation</div> 
 
<div id="page"> 
 
    <table class="basic"> 
 
    <tr> 
 
     <th>id</th> 
 
     <th>text</th> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Long long thing</td> 
 
    </tr> 
 
    </table> 
 
    <div id="pagination">Show pagination</div> 
 
</div>