Question

我有一个固定的标题，而不是260px。我three columns height 100%。content area to be a fluid-container that is 12 column wide。

<div class="header"></div>
<div class="secondary-aside"></div>
<div class="container">
    <div class="row">
      <div class="col-sm-4"></div>
      <div class="col-sm-4"></div>
      <div class="col-sm-4"></div>
    </div>
</div>

以下是我正在努力的小提琴。 cols的宽度随布局而变化。

http://codepen.io/anon/pen/qxusJ

Answer 1

我不太明白;你希望容器是流动的，但是你的容器中有没有固定宽度的列？

你如何做到：

<div class="header"></div>
<div class="container">
    <div class="secondary-aside"></div>
    <div class="content">
      <div class="col-sm-4"></div>
      <div class="col-sm-4"></div>
      <div class="col-sm-4"></div>
    </div>
</div>

使用以下CSS：

html, body { 
    height: 100%;  
}

.header { 
    height: 60px;
  background: blue;
  width: 100%;
}

.container { 
    overflow: auto; 
  height: 100%; 
}

.secondary-aside { 
    width: 25%;
  float: right; 
    background: red; 
  height: 100%; 
}

.content { 
    width: 75%;
  float: left;
  background: #777;
  overflow: auto;
    height: 100%;
}

.col-sm-4 { 
    height: 100%;
  background: yellow;
  width: 33.3333%;
  float: left;
}

那会有帮助吗？

Answer 2

不明确你的意思 cols的宽度与布局有关。

以这种方式尝试：

html, body, .container { height:100%; width:100%; /*keep html and body 100% */ margin:0; background:lightgray } .container { display:table; width:calc(100% - 260px);/*keep container 100% - 260px */ border-spacing:0.5em; }

Answer 3

我不明白为什么你在BS中使用这么多自定义样式。在http://www.responsinator.com/

中检查页面的响应性

检查一下。

<html>
<head>
    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<style>
    .secondary-aside {
        width: 25%;
        float: right;
        background: #000000;
        height: 100%;
    }
</style>

</head>
<body>
<div class="container-fluid">
<div class="header">i am the header</div>
<div class="secondary-aside col-sm-4">ff</div>
<div class="col-sm-8">
        <div class="col-sm-4" style="background-color: red">r</div>
        <div class="col-sm-4"style="background-color: green">g</div>
        <div class="col-sm-4"style="background-color: blue">b</div>
</div>
</div>
</body>
</html>

容器宽度问题

3 个答案: