Question

我对此布局有一些问题。我可以让其中的一件事起作用，而不是两者都在一起。首先，让我向您展示一下我想要实现的目标：

3 columns same height

描述

这是一个3列Boostrap布局，具有可变高度的元素（在图像中或多或少就像它有帮助）和其中一个可变高度元素，中间底部一个，保持2个div，宽度为100％和50％的高度。

我尝试的问题和解决方案

问题是我需要让所有3列都具有相同的高度。在尝试不同的解决方案后，我可以实现这一点但是，当我试图添加那些高度为50％的2个叠加的div时，我无法做到。事实上，我可以使用vh来做，但我不想使用这种方法。我认为flex可能是解决方案，但也许是因为我的限制，我无法做到这一点，只是在中间列中得到了3个相同大小的元素，例如：橙色框，顶部链接，底部链接50％高度。这很重要，因为布局重叠了50％，所以看起来我真的不喜欢这种方法（仍然认为解决方案必须与 flex 相关）

代码

所以这是我到目前为止的代码。当然，我可以改变标记和方法，因为它可能完全偏离基础，但这是我到目前为止所做的：

＆＃13;

.topzone{align-items:stretch ; height:100%; overflow:hidden; }
.firstcol, .secondcol, .thirdcol{padding:0; }
.firstcol, .buttoneer{background:#06a url(images/blue_noise.png); color:#fff;}
.colbox{padding:30px}
.buttoneer{height:100%; }
.linkbut{width:100%; height:50%; padding:16px; display:inline-block; font-size:36px; line-height:36px; vertical-align:middle; background:rgba(0,0,0,0.5); margin:10px auto;}

＆＃13;

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container mainbody">
    <div class="row topzone">
        <div class="col-xs-12 col-lg-4 firstcol">
            <div class="colbox">
                <img src="images/image1.png" alt="" />
            </div>
            <div class="girl">
                <img class="img-responsive" src="images/image2.jpg" alt="" />
            </div>
        </div>
        <div class="col-xs-12 col-lg-5 secondcol">
            <div class="girl">
                <img class="img-responsive" src="images/image3.jpg" alt="" />
            </div>
            <div class="colbox buttoneer">
                <div class="linkbut topbut"><a href="#">Top Link</a>

                </div>
                <div class="linkbut bottombut"><a href="#">Bottom Link</a>

                </div>
            </div>
        </div>
        <div class="col-xs-12 col-lg-3 thirdcol">
            <div class="colbox">
                	<h2>Our Story</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit dui id tellus dictum ornare. Praesent luctus non justo sed pharetra. Quisque posuere vehicula urna, ac dignissim erat suscipit quis. Nam condimentum nibh in sapien finibus rutrum. Curabitur in mi vestibulum, condimentum odio sed, sollicitudin leo. Pellentesque vehicula lectus sed ligula vulputate, at efficitur metus interdum. Suspendisse nec dui id ipsum commodo porttitor. Donec maximus, tellus ut pretium tristique, odio lorem efficitur tortor, a ornare felis augue eget augue. Sed ac orci scelerisque, feugiat ex at, pulvinar neque. Donec vehicula sodales volutpat.</p>
            </div>
        </div>
    </div>
</div>

＆＃13;

最终注意事项：

请注意我不关心小屏幕，50％高度按钮除外，因为他们无论如何都会使用col-xs-12，所以这种行为仅适用于大中型屏幕。此外，尽管我对这个问题有任何帮助，但我并不是在寻找完整的代码，至少不一定。如果您发布完整的代码来解决问题，我也想知道它是如何工作的，所以我可以在将来自学和做。

任何答案绝对赞赏，谢谢你提前

编辑：我可以看到使用Stack Overflow的代码片段，它看起来与我的本地版本看起来不一样，这可能是因为图片。

Answer 1

这将是一个＆＃34;不确定为什么它以这种方式工作，但它确实＆＃34;回答。也许有人可以进一步发光。如果明确声明每个封闭div的高度，则可以将按钮的高度声明为50％，如下所示：

http://www.bootply.com/VASwIpqz8b

<div class="container-fluid" style="height:100%">
  <div class="col-xs-4" style="height:50%;">
    <div class="col-xs-12" style="height:100%">
      <div class="row" style="height:100%">
      <div class="tophalf"></div>
      <div class="bottomhalf"></div>
    </div>
  </div>
</div>

CSS：

html,body{height:100%;}

.tophalf{
height: 50%;
background: blue;
}
.bottomhalf{
height: 50%;
background: red;
}

Answer 2

这接近你需要的吗？

enter image description here

HTML：

<div class="row full-screen">
<div class="col-sm-4 firstcol col fix">
    <div class="col-sm-12 firstcol-first-element"></div>
    <div class="col-sm-12 firstcol-second-element"></div>
</div>
<div class="col-sm-5 secondcol col fix">
    <div class="col-sm-12 secondcol-first-element"></div>
    <div class="col-sm-12 secondcol-second-element fix">
        <a href="http://placekitten.com/g/200/300" target="_blank" class="col-sm-12 top-link">Top link to kitten</a>
        <a href="http://placekitten.com/g/200/300" target="_blank" class="col-sm-12 bottom-link">Bottom link to kitten</a>
    </div>
</div>
<div class="col-sm-3 thirdcol col fix">
    <div class="colbox">
         <h2>Our Story</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit dui id tellus dictum ornare. Praesent luctus non justo sed pharetra. Quisque posuere vehicula urna, ac dignissim erat suscipit quis. Nam condimentum nibh in sapien finibus rutrum.</p>
    </div>
</div>

CSS :(以下小提琴中包含的Bootstrap css）

.full-screen {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: 0px;
}
a {
    text-align: center;
}
.col {
    height: 100%;
}
.fix{
    padding: 0px;
    margin: 0px;
}
.firstcol {
    background-color: green;
}
.secondcol {
    background-color: yellow;
}
.thirdcol {
    background-color: yellow;
}
.firstcol-first-element {
    height: 50%;
    background-color: blue;
}
.firstcol-second-element {
    height: 50%;
    background-color: green;
}
.secondcol-first-element {
    height: 60%;
    background-color: red;
}
.secondcol-second-element {
    height: 40%;
}
.top-link{
    height: 50%;
    background-color: grey;    
}.top-link:hover{  
    opacity: 0.7;
}
.bottom-link{
    height: 50%;
    background-color: brown;    
}.bottom-link:hover{  
    opacity: 0.7;
}
.colbox {
    padding: 30px;
}

点击这里的小提琴：

JsFiddle

更新的好词：

New Fiddle

如何使Bootstrap列的高度相同，然后管理内部元素的高度？

2 个答案: