Fatal编程技术网

Twitter bootstrap Twitter引导3-最大高度，自定义布局

twitter-bootstrap layout twitter-bootstrap-3 css

Twitter bootstrap Twitter引导3-最大高度，自定义布局,twitter-bootstrap,layout,twitter-bootstrap-3,css,Twitter Bootstrap,Layout,Twitter Bootstrap 3,Css,我有这样的想法： +-------------------------------------------+ | -- navigation -- | +------+------------------------------------+ | | | | left | | | side |

我有这样的想法：

+-------------------------------------------+
|             -- navigation --              |
+------+------------------------------------+
|      |                                    |
| left |                                    |
| side |                                    |
| with |                                    |
| affix|           -- content (white) --    |
| menu |                                    |
|-black|                                    |
|      |                                    |
|      |                                    |
|      +------------------------------------+
|      |           -- footer (white) --     |
+------+------------------------------------+
作为我在TB 3.0中的布局，以及一些代码：

<body>
    <header>
        <div class="row">
            <div class="col-md-12>-- navigation (height = 50px) here --</div>
        </div>
    </header>

    <div class="row">
        <div class="col-md-4">-- left side with black background here --</div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-12">-- content with white background here --</div>
            </div>

            <div class="row">
                <div class="col-md-12">-- footer (height = 50px) with white background here --</div>
            </div>
        </div>
    </div>
</body>



看看这个例子是否能帮到你：


它基本上将列包装在一个容器中，设置100%的高度，并使导航栏、侧栏和页脚
位置：固定
您的问题似乎只是页脚？（或内容高度）。
使用jquery设置内容太小时的页脚固定/粘滞（）

比如：

css来自：

javascript:


 if ($(window).height() > ($('#content').innerHeight() + $('#navigation').innerHeight() + $('#footer').innerHeight() ))
{
    $('#content').addClass('wrap');
    $('#footer').addClass('footerfixed');
}


他们似乎没有（或请参阅：stackoverflow.com/a/17582746/1596547）纯CSS解决方案要解决此问题，请参阅：
纯CSS解决方案（使用calc）
如果您可以使用CSS3，并且这个
50px
高度是静态的，那么您可以使用
calc
来实现布局

这里有一个

HTML


<header>
        Header
</header>
<div id="Container">
    <div id="Left">I'm in the left menu</div>
    <div id="Right">
        <div id="Content">Content</div>
        <footer>Footer</footer>
    </div>
</div>



如果高度不是静态的，我有另一个解决方案给你，我证明它不是你的布局，但它可以用同样的方法来完成。
伙计，试图通过解释来理解所有这些，真是令人困惑-你能在codepen.io上抛出一些代码并链接到它吗？我很抱歉：）我忘了这一点。我编辑了我的问题，并在最后添加了链接。但顶部导航和页脚应该是可滚动的。它无法修复：）只是一个细节：“Fotter”应该是“Footer”…：-）

<header>
        Header
</header>
<div id="Container">
    <div id="Left">I'm in the left menu</div>
    <div id="Right">
        <div id="Content">Content</div>
        <footer>Footer</footer>
    </div>
</div>



*
{
    padding: 0;
    margin: 0;
}
html, body
{
    height: 100%;
}

header, footer
{
    height: 50px;

    background-color: yellow;
    text-align: center;
}
#Container, #Content
{
    height: calc(100% - 50px);
    overflow: auto;
}
#Left, #Right
{
    height: 100%;
}
#Left
{
    float: left;
    background-color: black;
    color: white;
}
#Right
{
    overflow: auto;
}