Question

我是html / css中的新手，我现在正在使用Bootstrap 3.我正在尝试将整个页面分成两列全高。第一列有一个图像（响应），而在另一列我想放一些文本。我的问题是我的图像没有占据整个高度（大小高达990px）并且找不到任何方法来解决这个问题... :( 我看起来像那样

http://levikoop.me/

任何想法??

谢谢你们！
的 HTML

<div class="container-fluid no-padding">
      <!-- /container -->
      <div class="row-fluid">
        <div class="col-md-6 no-padding" id="pic" >
            <img src="https://images.unsplash.com/uploads/1413548921627cb0e00f3/80652197?q=80&fm=jpg&w=1080&fit=max&s=6ce05e3ae3469356b9b0961c38386eec" class="img-responsive">
        </div> 

        <div class="col-md-6">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>  
    </div> <!-- /container -->

的 CSS

html, body{
	height:100%;
}

body {
  background-color: #FFF;
}

/*.navbar {
 	background-color: #FFF;
 	border-color: transparent;
	padding-right: 90px;
}*/

.no-padding{
	padding-left: 0px;
	padding-right: 0px;

}


.container-fluid{
	min-height: 100%;
	overflow: hidden;
}

#pic{
	margin-bottom: -9999px;
	padding-bottom: 9999px;
}

Answer 1

让我看看能否提供帮助;我不确定你的问题具体是什么，但是如果我没有弄错的话，你想要的是图像的解决方案太短，而且第二列的解决方案也是正确的。

如果是这样，试试这个：

为了获得列效果，我在下面的代码中使用了左浮点数，并使用下面的clearfix div清除它们。

短图像的潜在解决方案，选择背景颜色放置在图像下方，淡化图像边缘以匹配该颜色。

html, body{
	height:100%;
}

body {
  background-color: #FFF;
}

/*.navbar {
 	background-color: #FFF;
 	border-color: transparent;
	padding-right: 90px;
}*/

.no-padding{
	padding-left: 0px;
	padding-right: 0px;

}

.col-md-6left {
    overflow: hidden;
    width: 50%;
    float: left;
    background: #222222;
}

.clear-fix {
    clear: both;
}

.col-md-6right {
    width: 50%;
    float: left;
}

.container-fluid{
	min-height: 100%;
	overflow: hidden;
}

#pic{
	margin-bottom: -9999px;
	padding-bottom: 9999px;
}

<div class="container-fluid no-padding">
      <!-- /container -->
      <div class="row-fluid">
        <div class="col-md-6left no-padding" id="pic" >
            <img src="https://images.unsplash.com/uploads/1413548921627cb0e00f3/80652197?q=80&fm=jpg&w=1080&fit=max&s=6ce05e3ae3469356b9b0961c38386eec" class="img-responsive">
        </div> 

        <div class="col-md-6right">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
         </div>
        <div class="clearfix">
      </div>  
    </div> <!-- /container -->

Answer 2

试试这个https://jsfiddle.net/vzwa2fjL/7/

HTML

<div class="section">
    <div class="left">

    </div>

    <div class="right">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
    </div>
</div>

CSS

.section {
    height: 100vh;
}

.left {
    background-image: url('https://images.unsplash.com/uploads/1413548921627cb0e00f3/80652197?q=80&fm=jpg&w=1080&fit=max&s=6ce05e3ae3469356b9b0961c38386eec');
    background-size: cover;
    background-position: center;
    float: left;
}

.left, .right {
    width: 50vw;
    display: inline-block;
    height: 100%;
}

修改

您也可以使用JQuery执行此操作。这是https://jsfiddle.net/vzwa2fjL/12/

JS

$(window).resize(setHeightAndWidth); $(document).ready(setHeightAndWidth); function setHeightAndWidth() { $('.section').height($(window).height()); $('.left, .right').width($(window).width() / 2 - (15)); }

CSS

.left { background-image: url('http://placehold.it/1920x980/000000/ffffff'); background-size: cover; background-position: center; float: left; } .left, .right { display: inline-block; height: 100%; } .right { float: right; }

全高柱，带有响应式图像

2 个答案: