小解优快云论坛首页面的布局方式-优快云博客

本文链接：https://blog.youkuaiyun.com/dongdong9223/article/details/48374205

本文详细介绍了如何通过设置CSS样式，特别是使用`position: fixed;`属性，实现网页中左侧固定侧边栏与右侧内容区的滚动布局。通过在`body`元素上设置`padding-left`属性来调整布局，使得左侧的导航栏能够保持固定位置，而右侧的内容区域则可以自由滚动。此外，文章还提供了一个示意页面的代码示例，以便读者可以直观地理解实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载请注明出处：http://blog.youkuaiyun.com/dongdong9223/article/details/48374205
本文出自【我是干勾鱼的博客】

优快云论坛的首页面如下：

这里写图片描述

当然每个区域都是div。开始我以为都是通过相对位置作出的布局，但无论如何也看不出右侧宽度是怎么定义出来的。后来发现原来出发点就是错的。

这个布局很巧妙，body先加了一个左侧的padding，即：

padding-left: 220px

这样，页面中所有元素都挤到右侧去了。正常的话左导航也会挤过去，但是左导航使用绝对定位，加了一个：

position: fixed;
left:0px;
top:0px;

由此左导航顺理成章的搬家到了左侧。小鱼写了一个示意页面，可以参考，效果是这样的：

这里写图片描述

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Top Frame</title>
<style type="text/css">

body {
    padding-left: 220px;
}

#head_wrapper{
    height: 100px;
    border: solid 1px red;
    padding: 0px 10px;
    float: top;
}

#content_left{
    width: 220px;
    height: 320px;
    margin: 0px;
    border: solid 1px blue;
    position: fixed;
    left:0px;
    top:0px;
}

#content_right{
    padding: 0px 10px;
    border: solid 1px green;
    height: 200px;
}
</style>

<script type="text/javascript">
</script>

</head>

<body>
    <div id="wrapper" class="wrapper_1" style="display:block">
        <div id="head">
            <div id="head_wrapper">
                Top
            </div>
        </div>

        <div id="content_left">
            left
        </div>

        <div id="content_right">
            right
        </div>
    </div>
</body>
</html>