水平定位兩個絕對元素而不使用javascript

Question

我有一個帶有標題欄和下面兩列的頁面。這兩列的位置是絕對的，所以它們可以將背景顏色擴展到頁面的底部。這裏是約束條件：

• 我想右列左邊緣開始左列右邊緣結束。
• 左列中的文字隨一些ajax請求而變化。它需要擴展，所以我不能在左列上使用固定寬度。
• 右列的寬度無關緊要。它的高度必須至少爲垂直填充頁面至底部。如果內容低於頁面底部，背景應該隨之擴展。

的想法是，用戶會訪問這個頭版它會看起來「全」，在所有的三列橫佔據了幾乎整個頁面，並必須垂直佔據整個頁面。當他們向下滾動時，左列可以結束，右列可以繼續。

我已經完成了這個使用JavaScript。

$("#right").css('left', $("#left").width()+'px'); 

我不想使用JavaScript。我可以用這些限制使用CSS3重新制作這個頁面嗎？

http://jsfiddle.net/m3ta/BJFME/2/

Answer 1

基於「浮動」的提示，這是要走的路：

1. 重新安排左側欄是正確的COL元素
2. 設置正確的山坳元素中以100％的寬度
3. 設置左邊欄「浮動：左」，並給它的100％
4. 檢查的高度，如果你仍然需要在「中期」榆樹;）

CSS

#left { 
    float:left; 
    background: SkyBlue; 
    height:100%; 
} 

#right { 
    position: absolute; 
    background: YellowGreen; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    left: 0; 
} 

HTML

<div id = "mid"> 
    <div id = "right"> 

     <div id = "left"> 
      <p>Lorem Ipsum Something</p> 
      <p>Lorem Ipsum Something 23</p> 
      <p>Lorem Ipsum Something 23 and much more text</p> 
     </div> 

     <p>And here goes the content for the right part</p> 
    </div> 
</div> 

看到這個分叉搗鼓一個例子http://jsfiddle.net/UXGjt/

Answer 2

添加到foobored的職位 - 因爲他比我快 - 添加最大寬度來左邊的div。而當你展開時 - 它不會超過網頁的50％，同時保持文本本身。

JSFIDDLE

* { margin: 0; padding: 0 } 
#top { height: 100px; background: orange } 
#mid { position: absolute; top: 100px; bottom: 0; width: 100% } 

#left { 
    float:left; 
    max-width: 50%; 
    background: SkyBlue; 
    height:100%; 
} 

#right { 
    position: absolute; 
    background: YellowGreen; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    left: 0; 
} 

Answer 3

試試這個：

* { margin: 0; padding: 0 } 
#top { height: 100px; background: orange } 
#mid { position: absolute; top: 100px; bottom: 0; width: 100% } 

#left { 
    float:left; 
    max-width: 50%; 
    background: SkyBlue; 
    height:100%; 
    width: auto; 
} 

#right { 
    position: absolute; 
    background: YellowGreen; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    width: auto; 
    height: auto; 
    overflow: auto; 
} 

Fiddle。

Answer 4

如果我明白你正確的，這是你的解決方案：

http://jsfiddle.net/BJFME/3/

#flexbox {  
    display: -webkit-box; 
    -webkit-box-orient: horizontal; 
    -webkit-box-pack: start; 
    -webkit-box-align: start; 

    display: -moz-box; 
    -moz-box-orient: horizontal; 
    -moz-box-pack: start; 
    -moz-box-align: start; 

    display: box; 
    box-orient: horizontal; 
    box-pack: start; 
    box-align: start; 

    overflow: hidden; 
} 
#flexbox .col { 
    width: 27.333%; 
    padding: 30px 3% 0; 

    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
} 
#flexbox .col p { 
    margin-bottom: 30px; 
} 
#flexbox .col:nth-child(1) { 
    -moz-box-ordinal-group: 2; 
    -webkit-box-ordinal-group: 2; 
    box-ordinal-group: 2; 
    background: #ccc; 
} 
#flexbox .col:nth-child(2) { 
    -moz-box-ordinal-group: 1; 
    -webkit-box-ordinal-group: 1; 
    box-ordinal-group: 1; 
    background: #eee; 
} 
#flexbox .col:nth-child(3) { 
    -moz-box-ordinal-group: 3; 
    -webkit-box-ordinal-group: 3; 
    box-ordinal-group: 3; 
    background: #eee; 
} 

剛接手的代碼從這個網站：

http://css-tricks.com/fluid-width-equal-height-columns/

對此有多種解決方案。

Answer 5

我認爲你正試圖acheive表佈局，試試這個http://jsfiddle.net/MtBXf/

<div id = "top"></div> 
<div id = "mid"> 
    <div id = "left"> 
      <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation </p> 
     </div> 
    <div id = "right"> 
     <p>And here goes the content for the right part</p> 
    </div> 
</div> 



* { margin: 0; padding: 0 } 
#top { height: 100px; background: orange } 
#mid { display:table-row; top: 100px; bottom: 0; width: 100% } 

#left, #right { 
    display:table-cell; 
    width: 50%; 
    max-width: 50%; 
} 
#left { 
    background: SkyBlue; 
} 
#right { 
    background: YellowGreen; 
} 

Answer 6

也許下面的CSS 2.1解決方案，它的工作原理，即使在較老版本的IE：

<div id = "top"></div> 
<div id = "mid"> 
    <div id = "left"> 
     <p>Lorem Ipsum Somささsething</p> 
     <p>Lorem Ipsum Something 23dsdsdsdsd</p> 
     <div id = "right"> 
      dsdsdsdsd 
     </div> 
    </div> 
</div> 
* { margin: 0; padding: 0 } 
#top { height: 100px; background: orange } 
#mid { position: absolute; top: 100px; bottom: 0; width: 100% } 

#left { 
    position: absolute; 
    background: SkyBlue; 
    top: 0; 
    bottom: 0; 
} 

#right { 
    position: absolute; 
    background: YellowGreen; 
    top: 0; 
    left: 100%; 
    min-height: 100%; 
}