如何实现图片中的布局，顶部，底部固定，中间内容包括导航栏和内容列表，并且宽度为1200px。左侧导航也为固定，请教大家如何实现

CSS布局实现

John

725612

发布于
2017-08-24

上下用display:fixed 定位，中间用一个div包起来，margin:90px auto;width:1200px;
90px为你上下定位的元素的高度

MOCHIKO

318712

发布于
2017-08-25

要固定的话是position:fixed，头部再包一个div，让它在头部居中，下面也是差不多的。

___Niooo___

41467096

发布于
2017-08-25

<header><div class="fixed">我是头部</div></header>
<main><div class="sidebar fixed">我是侧边栏</div>我是主体内容</main>
<footer><div class="fixed">我是底部</div></footer>

fixed = position: fixed;

大致就是上面这样...供参考...

xiaopengji

6411719

发布于
2017-08-25

头部和尾部用position:fixed 定位，中间用写，margin:90px auto;width:1200px;就可以了。

Fvison

23615

发布于
2017-08-25

首先你所谓的固定死，滚动时依然位置不变吗？如果是那就header和footer都fixed；中间中正常
<div class="head"></div>//position:fixed
<div class="content"> //最好给个min-height不然没有内容是就尴尬了
<div class="left-mod"></div>
<div class="mid-mod"></div>
</div>
<div class="foot"></div> //position:fixed
如果没有需求说滚动是头部底部位置不变，那就不需要fixed，正常布局就行

玉面小飞龙

16611427

发布于
2017-08-25

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta charset="utf-8">
    <meta name="author"content="zhengfuxing">
    <title></title>
    <style>
        body{
            margin: 0;
            text-align:center;
        }
        .header{
            position: fixed;
            top: 0;
            width: 100%;
            background: pink;
            height: 100px;
            
        }
         .footer{
            position: fixed;
            width: 100%;
            bottom: 0;
            height: 100px;
            background:lightgreen;
            
        }
        .content{
            height: 500px;
            width: 100%;
            background:#fff;
            margin-top: 100px;

        }
        .content-body{
            width: 1200px;
            background: rosybrown;
            margin: 0 auto;
            height: 500px;
        }
        .left-menu{
            position: fixed;
            width: 150px;
            background:palegoldenrod;
            height: 500px;
            top: 100px;
        }
        .right-list{
            width: 1050px;
            margin-left: 150px;
            background: wheat;
            height: 500px;
        }
         
    </style>
</head>
<body>
    <div class="header">我是头部</div>
    <div class="content">
        <div class="content-body">
            <div class="left-menu">我是导航栏</div>
            <div class="right-list">我是内容列表</div>

        </div>
    </div>
    <div class="footer">我是底部</div>
    
</body>
</html>

CSS布局实现

你尚未登录，登录后可以

css布局怎么保证右边一直在可视范围内？

CSS如何巧妙实现标题居中、关闭按钮居右效果？

js阻止冒泡问题？

Scss的rgba()方法无法对变量进行二次编译？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

后端获取的html标签页面如何正常显示？