首頁猿問兩列布局左側固定右側寬高自適應老是...

兩列布局左側固定右側寬高自適應老是有問題？

Html/CSS

慕前端9656150 2016-09-17 17:41:28

??<body> ????<div?class="warp"> ?????? ??????<div?id="top-main"> ??????1 ??????</div> ?????? ??????<div?id="left-main"> ??????2 ??????</div> ?????? ??????<div?id="right-main"> ??????5 ??????</div> ????</div> ?</body>????????#top-main{ ??????????width:?100%; ??????????height:50px; ??????????background-color:?#428bca; ????????} ????????#left-main{ ??????????position:?fixed; ??????????width:?220px; ??????????height:100%; ??????????background-color:?#5cb85c; ????????} ????????#right-main{ ??????????margin-left:?220px; ??????????width:?100%; ??????????height:100%; ??????????background-color:?#333; ????????}會出現(xiàn)超出屏幕寬和高都沒有自適應

查看完整描述

2 回答

已采納

小白師兄

TA貢獻55條經(jīng)驗獲得超37個贊

首先來說你的你的高度的問題,之所以右側高度沒有撐起來,是因為你的width:100%;不起作用,因為他的父級元素沒有定高度,所以,你繼承100%的高度是無效的!

解決辦法:在樣式上加如下代碼:

.warp,html,body{

? ? ? ? ? ? height: 100%;

? ? ? ? }

這樣就可以把高度撐起來,寬度也撐起來了,但是因為都繼承的100%;所以邊緣有超過屏幕的滾動條,因為窗體寬度100%;左側占了220px,那么右側就沒有100%的寬了,但是你還是設置右側占100%;所以有超過的220px溢出屏幕!

如果想簡單的出效果:你可以把上面我給你的代碼改成:

.warp,html,body{

? ? ? ? ? ? height: 100%;

? ? ? ? ? ? overflow:hidden;?

? ? ? ? }

隱藏超出的部分,可以有兩列布局的效果,但是啊但是,最怕但是了!!

更可怕的是要告訴你,如果你不想用js控制,你的這種兩列自適應布局思路是錯誤的!

這種自適應的我建議用定位布局來實現(xiàn):

給你個小栗子:

<!DOCTYPE html>

<html>

<head>

? ? <meta charset="utf-8" />

? ? <title>全屏布局</title>

? ? <link rel="stylesheet" type="text/css" href="demo.css">

? ? <style type="text/css">

? ? html,

? ? body,

? ? .parent {

? ? ? ? margin: 0;

? ? ? ? height: 100%;

? ? ? ? overflow: hidden;

? ? }

? ??

? ? body {

? ? ? ? color: white;

? ? }

? ??

? ? .top {

? ? ? ? position: absolute;

? ? ? ? top: 0;

? ? ? ? left: 0;

? ? ? ? right: 0;

? ? ? ? height: 100px;

? ? ? ? background: blue;

? ? }

? ??

? ? .left {

? ? ? ? position: absolute;

? ? ? ? left: 0;

? ? ? ? top: 100px;

? ? ? ? bottom: 50px;

? ? ? ? width: 200px;

? ? ? ? background: red;

? ? }

? ??

? ? .right {

? ? ? ? position: absolute;

? ? ? ? left: 200px;

? ? ? ? top: 100px;

? ? ? ? bottom: 50px;

? ? ? ? right: 0;

? ? ? ? background: pink;

? ? ? ? overflow: auto;

? ? }

? ??

? ? .right .inner {

? ? ? ? min-height: 1000px;

? ? }

? ??

? ? .bottom {

? ? ? ? position: absolute;

? ? ? ? left: 0;

? ? ? ? right: 0;

? ? ? ? bottom: 0;

? ? ? ? height: 50px;

? ? ? ? background: black;

? ? }

? ? </style>

</head>

<body>

? ? <div class="parent">

? ? ? ? <div class="top">top</div>

? ? ? ? <div class="left">left</div>

? ? ? ? <div class="right">

? ? ? ? ? ? <div class="inner">right</div>

? ? ? ? </div>

? ? ? ? <div class="bottom">bottom</div>

? ? </div>

</body>

</html>

根據(jù)你的布局自行刪改不要的區(qū)域!應該看的明白!祝你好運!

反對回復 2016-09-17

慕前端9656150
還是要用JS實現(xiàn)了，只是用overflow 不適合我的目的

回復 2016-09-17

2 回答
0 關注
1466 瀏覽

關注

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

兩列布局左側固定右側寬高自適應老是有問題？

兩列布局左側固定右側寬高自適應老是有問題？

2 回答

相關問題推薦

添加回答

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

兩列布局左側固定右側寬高自適應老是有問題？

兩列布局左側固定右側寬高自適應老是有問題？

2 回答

相關問題推薦

添加回答

兩列布局左側固定右側寬高自適應老是有問題？