Question

我想要彼此相邻的两个盒子，一个具有固定宽度的盒子，另一个盒子的宽度将根据浏览器的大小而改变。这个盒子有溢出：auto，我正试图让第一个盒子作为一个侧栏，跟着你走下页面。但当然我似乎无法做到这一点，并且来到这里希望有人能给我一些例子，或指出我正确的方向。

谢谢！

Answer 1

为了实现布局，您可以尝试以下几行：

<强> HTML：

<div>
    <div id="col1">Left Navigation Menu</div>
    <div id="col2">Right Content</div>
</div>

<强> CSS：

#col1
{
    position:fixed;
    width:400px;
}

#col2
{
    position:absolute;
    left:400px;
}

Answer 2

我是不是想在CSS中想到一个很好的方法，我正在引导我的google-fu并找到...

http://plugins.jquery.com/project/jStickyScroll

“此插件允许您在向下滚动页面时将div元素保留在浏览器窗口的顶部。最常见的用途是在滚动到网页底部时保持侧边栏导航菜单不会消失。“

你可以试试......

#element{
   position:fixed;
}

虽然这在IE6中没有黑客的情况下不起作用，但请参阅 http://www.howtocreate.co.uk/fixedPosition.html

Answer 3

放手一搏（我希望这就是你追求的目标？）：

在此处观看现场演示：http://jsfiddle.net/VcecU/

<强> HTML

<div class="main_container">
        <div class="content_a">1</div>
        <div class="content_lotsoftext">Start. Lots of text goes here! Finish. </div>
    </div>

<强> CSS

.main_container{
    background-color:#ccc;
    overflow:auto;
    zoom:1;
}

.content_a{
    width:60px;
    float:left;
    background-color:#3FF;
}

.content_lotsoftext{
    float:left;
    background-color:#FCF;
    margin:-20px 0 0 60px; /* -- Need conditional for IE6 and 7 to remove the margin to get it to work in those browsers --*/
    /*-- The following classes help it to sit better in IE6 and 7 --*/
    clear:left;
    display:inline;
}

请注意，您需要IE6＆amp; 7条件才能删除保证金，清除并显示来自.content_lotsoftext的类

添加最多100％浏览器的框

3 个答案: