如何修復垂直截面？

我想將屏幕分爲兩個垂直區域，左邊的區域不應滾動。如何修復垂直截面？

+--------------------------------+-----------------+ 
|        |     | 
|        | Fixed,  | 
|        | No scrolling | 
|  Regular behavior  |     | 
|        |     | 
|        |     | 
|        |     | 
|        |     | 
|        |     | 
+--------------------------------+-----------------+

我該如何用Bootstrap3實現這一目標？因爲我想從Bootstrap的樣式和形式。

注意：
響應式設計是不需要的，因爲這隻會被臺式機看到。
我知道Bootstrap3可能會矯枉過正。我只需要這種佈局和一些形式和幾個按鈕的樣式。我只是發現Bootstrap有很好的記錄和流行。

非常感謝！

來源

2013-10-29 alesch

你需要有一個div容器和裏面兩個div。在DIV上給予固定高度並完成。 –

_「超級感謝！」_ - 是的，沒錯。但是您忘記給我們您的帳單地址... – CBroe

感謝您提供以下所有答案。他們都爲純CSS工作，但如何爲Bootsrap3做到這一點？ – alesch

可能會這樣嗎？ http://jsfiddle.net/VfTYs/1/

HTML：

<div id="container"> 
    <div class="myleft"> 
     <h1>I'm on the left !</h1> 
    </div> 
    <div class="myright"> 
     I'm fixed on the right ! 
     <ul> 
      <li>some</li> 
      <li>items</li> 
     </ul> 
    </div> 
</div> 
<h1>Other thing ...</h1>

CSS：

html 
{ 
    background-color : #111111; 
    color    : #DDDDDD; 
} 

body 
{ 
    padding   : 0; 
    margin   : 0; 
} 

#container 
{ 
    height    : 1500px;  
} 

#container>.myleft 
{ 
    background-color : #444444; 
    width    : 100%; 
    height   : 100%; 
    float    : left; 
} 

#container>.myright 
{ 
    background-color : #222222; 
    position   : fixed; 
    right   : 0; 
    height   : 100%; 
}

來源

2013-10-29 10:17:54 dooxe

我把我的Bootstrap container-div放在「myright」中，然後我可以使用它的表單控件。謝謝你的時間！ – alesch

試試這個，

<div class="container"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
</div>

風格是，

.container{ 
    width:100%; 
    height:100%; 
} 
.left{ 
    float:left; 
    width:70%; 
}

來源

2013-10-29 09:57:01

也許你可以嘗試使用DIVs.But你需要指定的寬度和其他必要的attributes.To滿足你的主要要求，右Div應設置爲固定和非滾動。更多詳細信息如下代碼：

<div style="width:100%"> 
    <div class="left" style="width:70%;float:left"></div> 
    <div class="right" style="width:30%;position:fixed;overflow:hidden;float:right"></div></div>

d高度可以是默認的，因爲該字段可以填充整個屏幕。

css代碼應該添加到一個CSS FILE.I在HTML中寫它只是爲了說明的目的。

來源

2013-10-29 10:04:53

如何修復垂直截面？

回答

相關問題