Question

我想将屏幕划分为两个垂直区域，左侧区域不应滚动。

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

如何使用Bootstrap3实现此目的？因为我想从Bootstrap的造型和形式。

注意：
不需要响应式设计，因为这只能通过台式机看到我知道Bootstrap3对此可能有点过头了。我只需要这个布局和一些样式的表单和几个按钮。我发现Bootstrap很好地记录和流行。

非常感谢！

Answer 1

可能是这样的事情？ 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%;
}

Answer 2

试试这个，

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

风格是，

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

Answer 3

也许您可以尝试使用DIV。但是您需要指定宽度和其他必要属性。为了满足您的主要要求，右侧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>

高度可以是默认值，因为该字段可能会填满整个屏幕。

应该将CSS代码添加到CSS文件中。我用HTML编写它只是为了说明目的。

如何修复垂直剖面？

3 个答案: