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

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）大于 1000 像素时，我也希望它是 300 像素宽。

我想这需要一些 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 流体布局 - 侧边栏的固定宽度

我在那里的回答：

我认为你看起来像这样：

<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/

作为一般说明：

您不需要将引导程序用作“主容器”，因此您可以将侧边栏与网格系统并排放置（如引导程序流体和响应式）。这样您就可以对侧边栏进行很多控制，而不会影响实际内容。

希望对你有效。