固定div，身体内容宽度为100％

时间：2016-08-24 17:28:10

标签： css twitter-bootstrap

我正在使用bootstrap并尝试将div修复到body-container div的顶部 使用这个css，我能够将div固定到容器的顶部，但它溢出body-container div的右边：

.top-bar {
    position: fixed;
    z-index: 1030;
    top: 60px;
    width: 100%;
}
.top-bar .item-count h4{   
    text-align: center;
}

以下是我的所有html / css：https://jsfiddle.net/rttvqa3k/

5 个答案:

答案 0 :(得分：1)

检查这是否有用......：）

OLD：

tierItems

NEW：

<div class="top-bar panel panel-default">
    <div class="panel-body row">
        <div class="col-xs-4 col-sm-4 col-md-4">
            <button class="btn btn-default">Button 1</button>
            <button class="btn btn-default">Button 2</button>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 matter-count">
            <h4>### Items in Report</h4>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
            <button class="btn btn-default pull-right">Button 3</button>
        </div>
    </div>
</div>

答案 1 :(得分：0)

This answer解释了position: fixed相对于容器的问题。答案确实提供了实现此目的的方法，但它处理已知的宽度。

  

使用“固定”定位的问题在于它需要   元素流出。因此它不能相对于它重新定位   父母，因为它好像没有一个。

答案 2 :(得分：0)

您可以设置固定元素的宽度或最大宽度（.top-bar width 750px），但是您必须处理不同屏幕尺寸的媒体查询。

答案 3 :(得分：0)

我发布此信息是为了让您明白事情，因为在标记为正确的答案中评论的时间太长。

您可以在CSS属性position中使用多个值。

静态，默认为相对，绝对和已修复。

详细了解 here 。

如果您使用position: fixed;而未定义top和left值，则您的元素会将这些值默认为其父元素的呈现位置。

以下是一个清晰的例子：

如果您的正文内容为padding-left: 15px;，则position: fixed;的元素的默认值为left: 15px;。顶部也是如此，如果您的父元素位于视口顶部（X）px，假设X等于60，则position: fixed;元素将默认为top: 60px;

您可以在此处看到此行为：（请注意，我没有引用bootstrap.js，因此您可以看到它与您的问题无关。） 

.top-bar {
    position: fixed;
    z-index: 1030;
    width: 100%;
}

＆＃13;
＆＃13; 
body {
  padding-top: 135px;
}
footer {
  text-align: center;
}
.top-bar {
  position: fixed;
  z-index: 1030;
  width: 100%;
}
.top-bar .matter-count h4 {
  text-align: center;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Application name</a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a class="navbar-brand" href="/">Home</a>
          </li>
        </ul>

      </div>
    </div>
  </div>
  <div class="container body-content">


    <div class="top-bar panel panel-default">
      <div class="panel-body row">
        <div class="col-xs-4 col-sm-4 col-md-4">
          <button class="btn btn-default">Button 1</button>
          <button class="btn btn-default">Button 2</button>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 matter-count">
          <h4>### Items in Report</h4>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
          <button class="btn btn-default pull-right">Button 3</button>
        </div>
      </div>
    </div>
    <div class="panel panel-primary">
      <div class="panel-heading">
        Some region
      </div>
      <div class="panel-body">
        some content
        <br/>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br/>some more content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br/>event more content
      </div>
    </div>
    <div class="panel panel-primary">
      <div class="panel-heading">
        Some region
      </div>
      <div class="panel-body">
        some content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />some more content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />event more content
      </div>
    </div>

    <hr />
    <footer>
      <p>&copy; Some Application</p>
    </footer>
  </div>

</body>
＆＃13;
＆＃13;
＆＃13;

因此，正确的方法是设置此属性，使其不会默认。

这样：

.top-bar {
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 1030;
    width: 100%;
}

＆＃13;
＆＃13; 
body {
    padding-top: 135px;
}
footer {
  text-align: center;
}


.top-bar {
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 1030;
    width: 100%;
}
.top-bar .matter-count h4{   
    text-align: center;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a class="navbar-brand" href="/">Home</a></li>
                </ul>
                
            </div>
        </div>
    </div>
    <div class="container body-content">
    
    
    <div class="top-bar panel panel-default">
    <div class="panel-body row">
        <div class="col-xs-4 col-sm-4 col-md-4">
            <button class="btn btn-default">Button 1</button>
            <button class="btn btn-default">Button 2</button>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 matter-count">
            <h4>### Items in Report</h4>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
            <button class="btn btn-default pull-right">Button 3</button>
        </div>
    </div>
</div>
<div class="panel panel-primary">
    <div class="panel-heading">
        Some region
    </div>
    <div class="panel-body">
        some content
        <br/>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br/>
        some more content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br/>
        event more content
    </div>
</div>
<div class="panel panel-primary">
    <div class="panel-heading">
        Some region
    </div>
    <div class="panel-body">
        some content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        some more content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        event more content
    </div>
</div>
    
    <hr />
        <footer>
            <p>&copy; Some Application</p>
        </footer>
    </div>

</body>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：-1)

将overflow-x添加到您的班级说明中。这将在需要时添加滚动条

    overflow-x:auto;
相关问题
最新问题