固定侧杆和流体含量区域 [英] Fixed sidebar and fluid content area

问题描述

>

尝试创建一个像这个图像的页面。但我被困在侧边栏。我试图让它左右漂浮。但有些棘手的问题！试图使侧栏绝对定位。但是当内容区域很大时，边栏背景不能跟上内容区域。

I was trying to create a page like this image. But I'm stuck with the sidebar. I tried to make it float left and right. But some tricky problems! Tried to make the sidebar absolute positioned. But when the content area is large, the sidebar background is not keeping up with content area.

任何人都可以帮助我创建一个基本结构？

Can anyone help me to create a basic structure of this?

这是我所用的！ / p>

This is what I have used!

aside{
    width: 215px;
    background: #f9f9f9;
    padding:5px 0;
    padding:5px;
    position: absolute;
    top: 128px;
    bottom:0;
    left: 0     
}
.main .content{
    background:#fff;
    padding:5px;
    margin-left: 195px;
    height:100%;
}

推荐答案

定位在侧边栏上，以及内容边距： http://jsbin.com/ucihul/1/edit

You can do it with absolute positioning on the sidebar, and a margin on the content: http://jsbin.com/ucihul/1/edit

主要属性包括：

1. 边栏和内容的父元素： position：relative

>

On the sidebar:

bottom: 0;
left: 0;
position: absolute;
top: 0;
width: 215px; /* or whatever your fixed width is */

$ c> margin-left：215px （或任何您的固定宽度）

On the content div: margin-left: 215px (or whatever your fixed width is)

你还可以在侧边栏和内容中添加内部div以进行其他控制（它们在我的演示中，但我没有对它们做任何操作）。

You can also have inner divs inside both the sidebar and content for additional control (they are in my demo, but I didn't do anything with them).

这篇关于固定侧杆和流体含量区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！