Question

在CSS流体布局中，所有div都使用百分比。但是，我需要我的侧边栏有一个固定的位置。

示例：

<aside style="width:25%; float:left; position:fixed;">
    aside content
</aside>
<div style="width:75%; float:left;">
    main content    
</div>

我真正要做的是根据视口使侧边栏保持特定的宽度。例如，如果视口宽度在1000到1200像素之间，我需要它宽300像素。

另一种选择：当我的父div（我知道我在上面的例子中没有提到父div）大于1000px时，我也希望它是300px宽。

我想这需要一些JS才能做到，但是当涉及到JS时我就是完全白痴，所以你的帮助会非常感激。谢谢。

Answer 1

尝试：

@media only screen and (max-device-width: 1024px) { div#sidebar { width: 300px; }}

Answer 2

尝试 CSS媒体查询

实施例

@media all and (min-width:1000px) and  (max-width:1200px)
{
  // css 
}

@media all and (min-width:300px) and (max-width:1000px)
{
   // css 
}

Answer 3

看似副本：Bootstrap fluid layout - fixed width of sidebar

我的回答是：

我认为你看起来像这样：

<div class="sidebar span4">
    this is my fixed sidebar
</div>
<div class="main">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2">this is fluid</div>
            <div class="span3 offset1">yeah!</div>
            <div class="span6">Awesome!</div>
        </div>
        <div class="row-fluid">
            <div class="span6">1 half</div>
            <div class="span6">2 half</div>
        </div>
    </div>
</div>

这是一个方便的小提琴：http://jsfiddle.net/TT8uV/2/

如同一般说明：

您不需要使用bootstrap作为“主要容器”，因此您可以放置侧边栏与网格系统并排（如引导程序流畅和敏感）。通过这种方式，您可以 A LOT 控制侧栏，不影响实际内容。

希望它适合你。

根据视口固定位置侧边栏（流体布局）

3 个答案: