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

在CSS流体布局中，所有div使用百分比。不过，我需要我的侧边栏有一个固定的位置。根据视口固定位置边栏（流体布局）

例子：

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

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

另一种方法：我还希望当它的父div（我知道我没有提到上面例子中的父div）时，它的宽度是300px，比说1000px大。

我想这需要一些JS做到这一点，但我是一个完整的白痴当谈到JS，所以你的帮助将不胜感激。谢谢。

来源

2012-12-20 user1919073

尝试：

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

来源

2012-12-20 14:41:45 Toping

尝试CSS媒体查询

例

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

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

来源

2012-12-20 14:55:51 Champ

看起来像重复：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批次。

希望它适合你。

来源

2013-03-06 01:42:58

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

回答

相关问题