当前位置：theitroad>Html Twitter bootstrap 3 两列全高

Html Twitter bootstrap 3 两列全高

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/19089384/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 13:57:14 　来源:igfitidea点击:

Twitter bootstrap 3 two columns full height

htmlcsstwitter-bootstrap

提问by uladzimir

I'm trying to make two-column full-heightlayout with twitter bootstrap 3. It seems that twitter bootstrap 3does not support full height layouts. What I want to do:

我正在尝试使用 twitter bootstrap 3制作两列全高布局。似乎twitter bootstrap 3不支持全高布局。我想做的事：

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+

If the content grows, the nav should also grow.

如果内容增长，导航也应该增长。

  • Height 100% for every parent doesn't work because there is the case where content is one line.
  • position absolute seems to be the wrong way
  • display: tableand display:table-cellsolve the problem, but it is not elegantly
  • 每个父级的高度 100% 不起作用，因为存在内容为一行的情况。
  • 绝对位置似乎是错误的方式
  • display: table并display:table-cell解决问题，但并不优雅

html:

html：

    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
      </div>
    </div>

Is there way to make it with default twitter bootstrap 3classes?

有没有办法用默认的twitter bootstrap 3类来制作它？

采纳答案by Danield

Edit:In Bootstrap 4, native classes canproduce full-height columns (DEMO) because they changed their grid systemto flexbox. (Read on for Bootstrap 3)

编辑：在Bootstrap 4 中，原生类可以生成全高列 ( DEMO)，因为它们将网格系统更改为 flexbox。（继续阅读 Bootstrap 3）

本机 Bootstrap 3.0 类不支持您描述的布局，但是，我们可以集成一些使用的自定义 CSS css tablescss 表来实现这一点。

Bootply demo/ Codepen

Bootply 演示/Codepen

Markup:

标记：

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

(Relevant) CSS

（相关）CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

The above code will achieve full-height columns(due to the custom css-table properties which we added) and with ratio 1:3(Navigation:Content) for medium screen widthsand above - (due to bootstrap's default classes: col-md-3 and col-md-9)

上面的代码将实现全高列（由于我们添加的自定义 css-table 属性）和比例为 1:3(Navigation:Content) 的中等屏幕宽度及以上 - （由于引导程序的默认类：col-md -3 和 col-md-9)

NB:

注意：

1)In order not to mess up bootstrap's native column classes we add another class like no-floatin the markup and only set display:table-celland float:noneon this class (as apposed to the column classes themselves).

1）为了不弄乱引导程序的本机列类，我们no-float在标记中添加另一个类，并且只在这个类上设置display:table-cell和float:none（与列类本身并列）。

2)If we only want to use the css-table code for a specific break-point (say medium screen widths and above) but for mobile screens we want to default back to the usual bootstrap behavior than we can wrap our custom CSS within a media query, say:

2)如果我们只想将 css-table 代码用于特定的断点（例如中等屏幕宽度及以上），但对于移动屏幕，我们希望默认回到通常的引导行为，而不是我们可以将自定义 CSS 包装在一个媒体查询，说：

@media (min-width: 992px) {
  .row .no-float {
      display: table-cell;
      float: none;
  }
}

Codepen demo

代码笔演示

Now, for smaller screens, the columns will behave like default bootstrap columns (each getting full width).

现在，对于较小的屏幕，这些列的行为类似于默认引导列（每个都获得全宽）。

3)If the 1:3 ratio is necessary for all screen widths - then it's probably a better to remove bootstrap's col-md-* classes from the markup because that's not how they are meant to be used.

3)如果所有屏幕宽度都需要 1:3 的比例 - 那么最好从标记中删除引导程序的 col-md-* 类，因为这不是它们的用途。

Codepen demo

代码笔演示

回答by Oswaldo Acauan

You can achieve what you want with the padding-bottom: 100%; margin-bottom: -100%;trick, has you can see in thisfiddle.

你可以用这个padding-bottom: 100%; margin-bottom: -100%;技巧实现你想要的，你可以在这个小提琴中看到。

I change your HTML a little bit, but you can achieve the same result with your own HTML with the following code

我稍微更改了您的 HTML，但是您可以使用以下代码使用自己的 HTML 实现相同的结果

.col-md-9 {
    overflow: hidden;
}

.col-md-3 {
    padding-bottom: 100%;
    margin-bottom: -100%;
}

回答by avrahamcool

Pure CSS solution

纯 CSS 解决方案

Working Fiddle

工作小提琴

Using CSS2.1 only, Work with all browsers (IE8+), without specifying any height or width.

仅使用 CSS2.1，适用于所有浏览器 (IE8+)，无需指定任何高度或宽度。

That means that if your header suddenly grows longer, or your left navigation needs to enlarge, you don't have to fix anythingin your CSS.

这意味着，如果您的标题突然变长，或者您的左侧导航需要放大，您不必修复CSS 中的任何内容。

Totally responsive, simple & clear and very easy to manage.

完全响应，简单和清晰，非常容易管理。

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="LeftNavigation">
            </div>
            <div class="Content">
            </div>
        </div>
    </div>
</div>

Explanation:The container divtakes 100% height of the body, and he's divided into 2 sections. The header section will span to its needed height, and the HeightTakerwill take the rest. How is it achieved? by floating an empty element along side the container with 100% height (using :before), and giving the HeightTakeran empty element at the end with the clear rule (using :after). that element cant be in the same line with the floated element, so he's pushed till the end. which is exactly the 100% of the document.

说明：容器div占身体100%的高度，分为2个部分。标题部分将跨越其所需的高度，HeightTaker其余部分将占据。它是如何实现的？通过在容器旁边以 100% 的高度浮动一个空元素（使用:before），并HeightTaker在末尾使用明确的规则（使用:after）给出一个空元素。该元素不能与浮动元素在同一行，所以他被推到了最后。这正是文档的 100%。

With that we make the HeightTakerspan the rest of the container height, without stating any specific height/ margin.

有了这个，我们使HeightTaker跨度成为容器高度的其余部分，而不说明任何特定的高度/边距。

inside that HeightTakerwe build a normal floated layout (to achieve the column like display) with a minor change.. we have a Wrapperelement, that is needed for the 100%height to work.

在里面，HeightTaker我们构建了一个普通的浮动布局（以实现像列一样的显示），并进行了微小的更改......我们有一个Wrapper元素，它是100%高度工作所必需的。

Update

更新

Here'sthe Demo with Bootstrap classes. (I just added one div to your layout)

这是带有 Bootstrap 类的演示。（我刚刚在您的布局中添加了一个 div）

回答by AndreDurao

I thought about a subtle change, which doesn't change the default bootstrap behavior. And I can use it only when I needed it:

我想到了一个微妙的变化，它不会改变默认的引导行为。我只能在需要时使用它：

.table-container {
  display: table;
}

.table-container .table-row {
  height: 100%;
  display: table-row;
}

.table-container .table-row .table-col {
  display: table-cell;
  float: none;
  vertical-align: top;
}

so I can have use it like this:

所以我可以像这样使用它：

<div class="container table-container">
  <div class="row table-row">
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
  </div>
</div>

回答by Oriol

To my knowledge you can use up to 5 methods to accomplish this:

据我所知，您最多可以使用 5 种方法来完成此操作：

  1. Using the CSS display table/table-cell properties or using actual tables.
  2. Using an absolute positioned element inside the wrapper.
  3. Using the Flexbox display property but, as of today, it still has partial support
  4. Simulate full column heights by using the faux column technique.
  5. Using the padding/margin technique. See example.
  1. 使用 CSS 显示表格/表格单元格属性或使用实际表格。
  2. 在包装器内使用绝对定位元素。
  3. 使用 Flexbox display 属性，但截至今天，它仍然有部分支持
  4. 使用仿柱技术模拟全柱高。
  5. 使用填充/边距技术。参见示例。

Bootstrap: I don't have much experience with it but I don't think they provide styles for that.

Bootstrap：我对此没有太多经验，但我认为他们没有为此提供样式。

.row
{
    overflow: hidden;
    height: 100%;
}
.row .col-md-3,
.row .col-md-9 
{
    padding: 30px 3.15% 99999px; 
    float: left;
    margin-bottom: -99999px;
}
.row .col-md-3 p,
.row .col-md-9 p 
{
    margin-bottom: 30px;
}
.col-md-3
{
    background: pink;
    left:0;
    width:25%
}
.col-md-9
{
    width: 75%;
    background: yellow;
}

回答by Nikolay Yenbakhtov

Modern and very simple solution:

现代且非常简单的解决方案：

HTML:

HTML：

<div class="container">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-9"></div>
  </div>
</div>

CSS:

CSS：

.row{
    display: flex;
}

回答by David Taiaroa

A pure CSS solution is easy enough and it works like a charm cross browser.

一个纯 CSS 解决方案很简单，它就像一个迷人的跨浏览器。

You simply add a large padding and an equally large negative margin to the nav and content columns, then wrap their row in a class with overflow hidden.
Live view
Edit view

您只需向导航和内容列添加一个大的填充和同样大的负边距，然后将它们的行包装在一个隐藏溢出的类中。
实时视图
编辑视图

HTML

HTML

<div class="container">

  <div class="row">
    <div class="col-xs-12 header"><h1>Header</h1></div>
  </div>

  <div class="row col-wrap">

    <div class="col-md-3 col">
      <h1>Nav</h1>
    </div>

    <div class="col-md-9 col">
      <h1>Content</h1>
    </div>

  </div>
</div>

CSS

CSS

.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
}

.col-wrap{
overflow: hidden; 
}

Good luck!

祝你好运！

回答by user2594152

The solution can be achieved in two ways

解决方案可以通过两种方式实现

  1. Using display:table and display:table-cell
  2. Using padding and negative margin.
  1. 使用 display:table 和 display:table-cell
  2. 使用填充和负边距。

The classes which are used to obtain the above solution are not provided in bootstrap 3. display:table and display:table-cell are given but only when using tables in HTML. negative margin and padding classes are also not there.

用于获得上述解决方案的类未在引导程序 3 中提供。 display:table 和 display:table-cell 提供，但仅在使用 HTML 中的表格时提供。负边距和填充类也不存在。

Hence we have to use custom css to achieve this.

因此，我们必须使用自定义 css 来实现这一点。

The below is the first solution

下面是第一个解决方案

HTML code:

HTML代码：

<div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row tablewrapper">
    <div class="col-md-12 tablerowwrapper">
        <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content">
            <div class="col-md-12">
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div>
    </div>
  </div>

</div>

the corresponding css:

对应的css：

html,body,.container{
        height:100%;
    }
    .tablewrapper{
        display:table;
        height:100%;
    }
    .tablerowwrapper{
        display:table-row;
    }
    .sidebar,.content{
        display:table-cell;
        height:100%;
        border: 1px solid black;
        float:none;
    }
    .pad_top15{
        padding-top:15px;
    }

The below is the second solution

下面是第二种解决方案

HTML code:

HTML代码：

 <div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row ovfhidden bord_bot height100p">
    <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content pad_top15">
            <div class="col-md-12">

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div> 
  </div>

</div>

the corresponding css:

对应的css：

html,body,.container{
        height:100%;
    }
    .sidebar,.content{
        /*display:table-cell;
        height:100%;*/
        border: 1px solid black;
        padding-bottom:8000px;
        margin-bottom:-8000px;
    }
    .ovfhidden{
        overflow:hidden;
    }
    .pad_top15{
        padding-top:15px;
    }
    .bord_bot{
        border-bottom: 1px solid black;
    }

回答by VAShhh

Ok, I've achieved the same thing using Bootstrap 3.0

好的，我使用Bootstrap 3.0实现了同样的目标

Example with the latest bootstrap

使用最新引导程序的示例

http://jsfiddle.net/HDNQS/1/

http://jsfiddle.net/HDNQS/1/

The HTML:

HTML：

<div class="header">
    whatever
</div>
<div class="container-fluid wrapper">
    <div class="row">
        <div class="col-md-3 navigation"></div>
        <div class="col-md-9 content"></div>
    </div>
</div>

The SCSS:

SCSS：

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

$headerHeight: 43px;

.navigation, .content {
    display: table-cell;
    float: none;
    vertical-align: top;
}

.wrapper {
    display: table;
    width: 100%;
    margin-top: -$headerHeight;
    padding-top: $headerHeight;
}

.header {
    height: $headerHeight;
}

.row {
    height: 100%;
    margin: 0;
    display: table-row;
    &:before, &:after {
        content: none;
    }
}

.navigation {
    background: #4a4d4e;
    padding-left: 0;
    padding-right: 0;
}

回答by Giovanni Silveira

So it seems your best option is going with the padding-bottomcountered by negative margin-bottomstrategy.

因此，您最好的选择似乎是padding-bottom采用消极margin-bottom策略。

I made two examples. One with <header>inside.container, and another with it outside.

我做了两个例子。一个在<header>里面.container，另一个在外面。

Both versions should work properly. Note the use of the following @mediaquery so that it removes the extra padding on smaller screens...

两个版本都应该可以正常工作。请注意以下@media查询的使用，以便它删除较小屏幕上的额外填充...

@media screen and (max-width:991px) {
    .content { padding-top:0; }
}

Other than that, those examples should fix your problem.

除此之外，这些示例应该可以解决您的问题。

相关推荐

Html 如何在移动和桌面设备中显示不同的图像

Html 如何在移动和桌面设备中显示不同的图像

Html 如何在jsp页面动态创建表格的行列

Html 如何在jsp页面动态创建表格的行列

Html 谷歌浏览器不会在移动设备上自动播放 HTML5 视频

Html 谷歌浏览器不会在移动设备上自动播放 HTML5 视频

Html 为什么 box-sizing 在 table 和 div 上的作用不同？

Html 为什么 box-sizing 在 table 和 div 上的作用不同？

相关推荐
最近更新
标签