如何让div扩展到屏幕的末尾？

时间：2016-07-01 18:08:21

标签： html css

我使用this post将container扩展到屏幕边缘。但是，仍有一个空白区域（红色部分）：

enter image description here

然后我尝试将width设置为103.75%。 But as I make the screen smaller the white space reappears.

有没有办法让container div填充该空格？

我的代码

HTML结构 

<div class="container-fluid">
        <div class="row-fluid">
            <div class="col-xs-5 col-sm-4">
            </div>
           <div class="col-xs-7 col-sm-8">
                <div class="container">
                    <div class="tab-content">
                    </div>
               </div>
           </div>
      </div>
</div>

CSS 

.container{
    background-color: #86E1D8;
    height: 100vh;
    width: 100%;
}

JSFiddle

4 个答案:

答案 0 :(得分：1)

删除包装容器的div上的右侧填充符合您的要求：

<div class="col-xs-7 col-sm-8" style="padding-right: 0;">
  <div class="container">
<!-- ... -->

jsFiddle

如果您希望双向扩展，请删除整个填充padding: 0。

你可以做的只是创建一个帮助类来为你做这个：

.no-padding-right {
  padding-right: 0;
}

然后在需要的地方使用它：

<div class="col-xs-7 col-sm-8 no-padding-right">
  <div class="container">

如果您希望此行为具有通用性，您甚至可以覆盖这些列类提供的默认填充：

.col-xs-7,
.col-sm-8 {
  padding-right: 0;
}

答案 1 :(得分：1)

创建一个no-padding课程，并将其添加到container-fluid和col-sm-8元素。

在css add

中

.no-padding{padding: 0;}

请参阅小提琴：https://jsfiddle.net/7ku7qvfx/1/

答案 2 :(得分：0)

内部衬垫不允许您的容器停留在右边缘。添加这些样式有助于：

.container {
    position: relative;
    right: -30px; // 30 px padding from parents
}

或者你可以删除父母的正确填充：

.container-fluid {
    padding-right: 0;
}

.col-xs-7.col-sm-8 {
    padding-right: 0;
}

答案 3 :(得分：0)

<强> SOLUTION：

首先用.row-fluid替换您的.row课程。 （编辑：下面的进一步说明。）

然后创建一个类，该类将覆盖Bootstrap的col- *默认padding-right: 15px和padding-left: 15px，并在div元素col-xs-7 col-sm-8中使用它。

CODE SNIPPET

＆＃13;
＆＃13; 
.container {
  background-color: #86E1D8;
  height: 100vh;
  width: 100%;
}
.tab-content {
  background-color: white;
  margin: 0 auto;
  width: 40%;
}
.col-no-padding {
  padding-left: 0;
  padding-right: 0;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-5 col-sm-4">
        <div class="header">
          <h1>Problems</h1>
        </div>
        <div class="panel-group" id="accordion">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
                            </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse in">
              <div class="panel-body">
                <ul class="nav nav-pills">
                  <li class="active"><a data-toggle="pill" href="#home">H</a>
                  </li>
                  <li><a data-toggle="pill" href="#menu1">11</a>
                  </li>
                  <li><a data-toggle="pill" href="#menu2">22</a>
                  </li>
                  <li><a data-toggle="pill" href="#menu3">3</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4> 
            </div>
            <div id="collapse2" class="panel-collapse collapse">
              <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4> 
            </div>
            <div id="collapse3" class="panel-collapse collapse">
              <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-7 col-sm-8 col-no-padding">
        <div class="container">
          <div class="tab-content">
            <div id="home" class="tab-pane fade in active">
              <h3>HOME</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <div id="menu1" class="tab-pane fade">
              <h3>Menu 1</h3>
              <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div id="menu2" class="tab-pane fade">
              <h3>Menu 2</h3>
              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
            </div>
            <div id="menu3" class="tab-pane fade">
              <h3>Menu 3</h3>
              <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

进一步解释：

由于.row已经对浮动元素使用了clearfix，因此您需要使用以下内容复制此行为：

.row-fluid:after,
.row-fluid:before {
  content: "";
  clear: both;
  display: table;
}

相反，您可以使用其他类删除行的默认margin-right: -15px;和margin-left: 15px; 

.row-no-margin {
  margin-left: 0;
  margin-right: 0;
}

旁注：

确保在Bootstrap之后引用外部CSS文件。

相关问题
最新问题