Question

制作包含3列（响应式）（左侧，中间，右侧）的页面的最佳做法，其中左侧和右侧列将被修复，100 vh并且两者都已固定width，如200px }而不是滚动，中心列将是overflow-y: scroll;。？

Answer 1

您必须将左右列设置为position:fixed; top:0; 对于右侧列，您可以添加right:0;和所需的width x%。对左边做同样的事，但是左边属性。

对于中间列，您只需设置margin:0 auto; width x%;。

请确保如果添加3宽度％，则表示<= 100％。

我让你成为了一个JsFiddle：http://jsfiddle.net/Beauceron/Lv750fcb/2/

＆＃13;

body{
    margin:0;
}
*{
    box-sizing:border-box;
}
.header, .footer{
    position:fixed;
    width:100%;
    height:50px;
    background:#000;
    color:#fff;
    text-align:center;
    font-size:30px;
}
.footer{
    top:auto;
    bottom:0;
}
.left, .right {
    position:fixed;
    width:20%;
    top:50px;
    padding:10px;
    height:100%;
}
.left{
    left:0;
}
.right{
    right:0;
}
.center{
    padding:60px 10px;
    margin:0 auto;
    width:60%;
}

＆＃13;

<div class="wrapper">
    <div class="header">HEADER</div>
    <div class="column left" style="background:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="column center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet risus nec dolor vulputate pulvinar. Donec fringilla in dolor sed commodo. Sed dignissim lacus quis lacus porta, sed elementum massa aliquam. Aliquam id fermentum arcu, id imperdiet diam. Pellentesque fermentum turpis quis eros dapibus vestibulum. Quisque fringilla tincidunt turpis, quis vehicula nibh fermentum sed. Phasellus pulvinar condimentum arcu, eu sollicitudin orci finibus eu.

Maecenas ornare tempor nisi non varius. Aliquam commodo vulputate consequat. Morbi commodo gravida odio in ultricies. Maecenas quis eleifend turpis, id ullamcorper ligula. Nunc eu sapien dolor. Nam luctus ante nec mi semper, non vestibulum dui vehicula. Vivamus ac placerat arcu. Duis auctor lacinia mi non dapibus. Curabitur pretium erat non justo aliquam, vitae feugiat libero venenatis. Sed varius ex ac lacus lobortis auctor.

Phasellus pretium elit sit amet nisi iaculis varius. Suspendisse eu est eget quam cursus suscipit et non dolor. Duis ac faucibus lorem. Cras maximus sem ullamcorper lacus consequat, ut convallis magna placerat. Sed at arcu turpis. Nunc ut volutpat justo, et tempor tellus. Duis nec sapien ligula. Cras pulvinar felis ligula, nec fringilla nisl aliquam ornare. Aenean mattis urna lorem, vel rhoncus diam condimentum quis. Quisque pulvinar nec nulla non tristique.

In hac habitasse platea dictumst. Ut quis lorem ac nulla aliquet laoreet. Morbi dignissim, nisi non convallis blandit, lorem massa accumsan odio, et pharetra ex dolor nec sem. Phasellus magna justo, facilisis in tortor ac, molestie accumsan nunc. Morbi finibus lacinia tristique. Nulla pulvinar consequat risus a porttitor. Mauris mollis, velit vel lacinia malesuada, dolor nibh pulvinar nulla, eget mollis nibh sem nec diam. Donec fringilla at ipsum at vehicula. Sed commodo porta odio sed ornare. Curabitur porttitor vulputate nulla, id bibendum lectus finibus id. Nulla a neque eget urna pharetra sollicitudin. Donec eget ex sed est mattis feugiat. Proin id arcu ac nulla elementum porttitor.

Ut condimentum ligula nec nisi efficitur, non ullamcorper tellus viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc scelerisque mauris ut ex tristique, at pretium metus pharetra. Nam quis leo id dolor ultricies placerat. Sed massa libero, facilisis id felis id, vehicula convallis est. Duis rutrum, ante sit amet rhoncus ultricies, turpis diam pharetra arcu, vel mattis diam orci eu metus. Aenean in nisl enim. Integer congue sit amet quam et luctus. Quisque dapibus consequat tortor, ac sagittis purus tristique ut. Duis efficitur non elit eu porttitor. Nullam sit amet nibh tortor. Nulla dictum lobortis tristique. Sed egestas pretium placerat. Ut sit amet tincidunt elit. Aliquam cursus libero erat.

Nulla rutrum maximus eleifend. Nam at odio ac velit lacinia sagittis. Quisque sollicitudin sem sapien, sit amet tincidunt lectus molestie id. Nam sagittis dolor eu purus elementum, eu mattis erat feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed rutrum risus nec tincidunt volutpat. Sed ultricies, tellus vel imperdiet venenatis, libero diam lobortis augue, eget eleifend mi nisl et est. Phasellus placerat lacus vel erat imperdiet sodales. Vivamus vel purus id turpis convallis elementum molestie ac libero. Suspendisse tortor diam, pretium id ipsum vitae, sollicitudin viverra odio. Pellentesque faucibus lacinia neque at malesuada.

Nam mi magna, pretium sed rhoncus ut, laoreet eu eros. Phasellus porttitor lectus non elit ultricies, sit amet consequat quam venenatis. Sed sit amet fringilla purus. Maecenas vitae nisl venenatis, pretium leo vel, sodales nulla. Aliquam erat volutpat. Mauris ipsum nisl, commodo rutrum nisi eget, placerat dapibus velit. Aenean condimentum pharetra sapien, a aliquam dui lobortis ut. Suspendisse tempus fringilla accumsan. Morbi vitae faucibus orci.

Suspendisse potenti. Sed massa justo, sollicitudin sed augue sit amet, tempor rutrum erat. Nunc eu porttitor ligula, a hendrerit leo. Cras pulvinar dapibus justo, in vulputate orci pharetra ac. Nulla facilisis at nibh a dignissim. Quisque condimentum condimentum ex, a vulputate dui. Praesent cursus blandit semper. Cras ac nisi sed ex dapibus feugiat. Suspendisse accumsan luctus arcu eget rhoncus. Maecenas sodales lacus a lacus condimentum tristique. Curabitur id dolor varius, pretium mi non, dignissim metus. Ut quis enim aliquam, eleifend purus sit amet, bibendum nisl. Nullam vel placerat neque, ut rhoncus lectus. In in aliquet erat. Morbi bibendum, metus non lacinia venenatis, risus turpis viverra est, semper aliquam purus est a nisi. Suspendisse potenti.</div>
    <div class="column right" style="background:yellow">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="footer">FOOTER</div>
</div>

＆＃13;

Answer 2

这是您正在寻找的http://jsfiddle.net/DIRTY_SMITH/abtuj3xj/3/

.header {
    background: blue;
    height: 50px;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
}

.container {
    width: 100%;

    position: relative;
    margin: 0;
}

.left {
    position: absolute;
    top: 50px;
    left: 0;
    width: 200px;
    height: 100vh;
    background: red;
}

.right {
    position: absolute;
    top: 50px;
    right: 0;
    width: 200px;
    height: 100vh;
    background: red;
}

.middle {
    margin-left: 200px;
    margin-right: 200px;
    margin-top: 50px;
    background: yellow;
}

制作3列页面的最佳做法

2 个答案: