6

我有这样的事情：

+-------------------------------------------+
|             -- 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% 我的浏览器窗口和页脚（白色背景）在我的内容下方可见（也在滚动上）。

现在，我得到了侧面最后一个元素的高度。如果我的内容很短，它会在浏览器垂直侧的中心结束。

这是它：http ://codepen.io/anon/pen/FxImy

4

3 回答 3

11

纯 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>

CSS

*
{
    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;
}

如果高度不是静态的，我有另一个解决方案给你，我在这里展示它不是你的布局，但它可以以同样的方式完成。

于 2013-10-29T09:34:04.133 回答
1

看看这个例子是否对你有帮助： http: //bootply.com/87811

它基本上将列包装在一个容器中，设置 100% 高度，并制作导航栏、侧边栏和页脚position:fixed

于 2013-10-25T15:36:14.243 回答
-1

你的问题似乎只是页脚？（或内容高度）。当 jquery 的内容太小时，设置页脚固定/粘性（http://getbootstrap.com/examples/sticky-footer/ ）。

就像是：

来自http://getbootstrap.com/examples/sticky-footer/sticky-footer.css的 css ：

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
.wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
.footerfixed {
  height: 60px;
  background-color: #f5f5f5;
}

javascript:

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

他们似乎没有（或参见：stackoverflow.com/a/17582746/1596547）纯 CSS 解决方案来解决此问题，参见：Sticky header, sticky footer (variable height), fluid middle?

于 2013-10-28T23:37:48.067 回答