我尝试创建一个两列布局，左侧是固定侧边栏，右侧是流体内容。我用 Flex 做，但我不想使用绝对位置 - 有没有优雅的方法可以做到这一点？还是我必须使用绝对？
我尝试做的是左侧边栏是 100% 高度，在右列中是您可以向下滚动的内容，但左侧栏保持 100% 固定，例如，只有右列滚动。
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.main-container {
padding: 0;
margin: 0;
list-style: none;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
/*-webkit-flex-flow: row wrap;
justify-content: space-around;*/
}
.sideMenu {
width: 10%;
height: 100%;
background-color: blue;
}
.content_area {
width: 90%;
background-color: green;
min-height: 2400px;
}<div class="main-container">
<div class="sideMenu"></div>
<div class="content_area"></div>
</div>谢谢。
您需要overflow: auto内容div。
.main-container {
display: flex;
height: 100vh;
}
.sideMenu {
width: 10%;
height: 100%;
background-color: aqua;
}
.content_area {
width: 90%;
height: 100%;
overflow: auto;
background-color: orange;
}
.content_area>div {
min-height: 2400px;
}
body {
margin: 0;
}<div class="main-container">
<div class="sideMenu">this column is fixed in place</div>
<div class="content_area">this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is sis scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable crollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable this column is scrollable
</div>
</div>这是另一个使用网格的示例。 您可以为侧边栏定义固定大小，无论视口宽度如何，它都会保持不变。
html,
body {
padding: 0;
margin: 0;
}
.main-container {
display: grid;
grid-template-columns: 200px 1fr;
}
.sideMenu {
background: blue;
}
.content_area {
background-color: green;
max-height: 900px;
overflow: auto;
}<div class="main-container">
<div class="sideMenu">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque natus, magni modi inventore ea quod voluptatem ipsum veniam aperiam accusantium libero unde perferendis! Tempora, odio.</p>
</div>
<div class="content_area">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto dolores alias, natus nam consequuntur corrupti sit asperiores, minus veritatis, distinctio aliquam! Ipsa voluptas dolore tempora molestiae dolorum ipsum enim? Veritatis maxime ipsa possimus velit id a voluptatem delectus pariatur amet dolores repellendus, ducimus consectetur sapiente reprehenderit minus esse eos. Quod laudantium eligendi eius officiis consequuntur culpa accusantium asperiores libero eos! Impedit expedita placeat enim adipisci fugiat distinctio vitae dolor quia vero? Laudantium eligendi voluptatem assumenda consequuntur recusandae aspernatur laborum vero debitis, enim magnam quisquam consequatur veniam error deleniti soluta odit explicabo vel cumque doloremque iusto inventore quae! Temporibus beatae officia mollitia atque ex labore, tempore voluptas. Nulla fuga ipsa debitis, nam a hic aliquam impedit adipisci maiores quaerat? Error nam architecto dolor quia tempore quas praesentium. Accusamus dolor odio debitis voluptatem voluptates voluptas modi totam facere iusto voluptatum fugit incidunt amet porro ad itaque earum in necessitatibus omnis sunt velit, inventore explicabo? Omnis debitis, velit illum ut perspiciatis excepturi harum nemo culpa magnam labore veniam in recusandae suscipit maxime id eius magni? Quia non deserunt dolorem perferendis ipsum ea nemo aperiam temporibus! Pariatur, quasi ullam voluptatum explicabo iure deleniti voluptas quidem optio sequi cumque exercitationem et cupiditate qui sapiente ipsum dignissimos a nulla, laudantium temporibus, non voluptates numquam quaerat. Hic, ad. Quae, eligendi magni quis quaerat necessitatibus minus libero doloremque, unde provident, quidem eum totam aut optio voluptas nemo laboriosam. Officiis consequuntur perspiciatis fugiat, sunt hic distinctio eum similique ratione! Labore, quidem adipisci repellendus, nesciunt minus laboriosam, maxime quam architecto obcaecati ut rerum dolorem soluta molestias accusantium earum illo. Quaerat in veniam ratione eligendi ipsum earum vitae quidem rem minus? Recusandae at ratione nisi ex. Repudiandae sapiente asperiores vitae ad omnis voluptates reprehenderit doloribus recusandae ipsam delectus excepturi, aut harum autem ab dolorum accusantium eius fuga. Labore rem atque quod odio asperiores? Accusamus deserunt sunt at! Deleniti at dolorem rem aliquid assumenda explicabo. Maiores nemo quibusdam facere ea, perferendis commodi deserunt ipsa quo quam explicabo ducimus odio ipsam dolorem fuga veritatis in quidem, doloremque ipsum excepturi. Minus veritatis deleniti obcaecati sapiente error aut necessitatibus sunt consequuntur ex quidem quisquam, voluptatum ullam, amet cum autem praesentium modi iste quas quam placeat porro animi. Odio illo expedita quasi minus laboriosam ullam aut unde, eligendi sunt voluptatibus consectetur assumenda velit ducimus cum aperiam vitae porro doloribus rem eveniet in. Perspiciatis delectus autem, sint molestiae itaque dignissimos mollitia! Suscipit ratione dolorum provident, odio a praesentium maiores nostrum porro consectetur dicta. Ipsum quasi in ea maiores, commodi eligendi quia doloremque fugit inventore totam rem sint illum sequi dolores voluptas adipisci? Necessitatibus illo quam eum fuga, ipsum atque numquam, quisquam reprehenderit similique natus perspiciatis harum nam officiis earum, laborum saepe veritatis nulla odio maxime quaerat eaque repellat voluptates laudantium. Sit repellat nobis deleniti voluptate consectetur nostrum quidem velit id mollitia molestias corrupti, ullam est nulla praesentium fugiat porro odit expedita maxime nesciunt quos neque ex accusantium. Corporis nihil nobis, expedita libero impedit dignissimos eveniet adipisci tenetur deleniti maxime ducimus blanditiis minima rem molestias laudantium aspernatur, ipsa saepe recusandae. Ullam a dicta ipsa autem sapiente iure eligendi quibusdam impedit consectetur, inventore optio assumenda nobis nostrum neque odio error veniam delectus perspiciatis similique velit nesciunt eveniet fuga temporibus. Minima sapiente ea ipsum modi, nobis id quos pariatur magnam molestias ad. Quibusdam tenetur ea deleniti illo. Tempore delectus dicta, quidem reprehenderit inventore fuga illum error est, sint fugiat vitae impedit iste debitis tempora eligendi quam, nam facilis consectetur cum aspernatur? Et fugiat voluptas sed saepe at veritatis asperiores minus dolor eligendi obcaecati quam sapiente expedita veniam laborum eum a fugit, nulla quaerat exercitationem quo deserunt sunt! Cum, laborum dolor deserunt id nesciunt delectus? Accusantium deserunt eveniet, nobis dolores id similique, tempora laudantium eius quisquam ex deleniti accusamus nostrum repudiandae delectus quibusdam. Voluptas numquam vel veritatis animi, rerum officiis recusandae harum reiciendis odit nesciunt architecto ullam illo aliquid cum natus et perferendis quam perspiciatis laboriosam consequatur non dolorum impedit quibusdam tempore. Debitis aut ipsa beatae repellat placeat minima quam, sed quidem, eos repellendus cumque neque libero quis voluptate deleniti,</p>
</div>
</div>这是使用CSS位置的另一种解决方案。
body {
margin: 0;
padding: 0;
}
div {
float: left;
}
.sideMenu {
width: 10%;
height: 100%;
background-color: green;
position: fixed;
left: 0;
top: 0;
}
.content_area {
width: 90%;
height: 100%;
margin-left: 10%;
overflow: auto;
background-color: yellow;
}