首頁(yè) 猿問兩列布局左側(cè)固定右側(cè)寬高自適應(yīng)老是...

兩列布局左側(cè)固定右側(cè)寬高自適應(yīng)老是有問題？

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; ????????}會(huì)出現(xiàn)超出屏幕寬和高都沒有自適應(yīng)

查看完整描述

2 回答

已采納

小白師兄

TA貢獻(xiàn)55條經(jīng)驗(yàn) 獲得超37個(gè)贊

首先來說你的你的高度的問題,之所以右側(cè)高度沒有撐起來,是因?yàn)槟愕膚idth:100%;不起作用,因?yàn)樗母讣?jí)元素沒有定高度,所以,你繼承100%的高度是無(wú)效的!

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

.warp,html,body{

? ? ? ? ? ? height: 100%;

? ? ? ? }

這樣就可以把高度撐起來,寬度也撐起來了,但是因?yàn)槎祭^承的100%;所以邊緣有超過屏幕的滾動(dòng)條,因?yàn)榇绑w寬度100%;左側(cè)占了220px,那么右側(cè)就沒有100%的寬了,但是你還是設(shè)置右側(cè)占100%;所以有超過的220px溢出屏幕!

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

.warp,html,body{

? ? ? ? ? ? height: 100%;

? ? ? ? ? ? overflow:hidden;?

? ? ? ? }

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

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

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

給你個(gè)小栗子:

<!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ū)域!應(yīng)該看的明白!祝你好運(yùn)!

反對(duì) 回復(fù) 2016-09-17

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

回復(fù) 2016-09-17

2 回答
0 關(guān)注
1498 瀏覽

關(guān)注

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

兩列布局左側(cè)固定右側(cè)寬高自適應(yīng)老是有問題？

兩列布局左側(cè)固定右側(cè)寬高自適應(yīng)老是有問題？

2 回答

相關(guān)問題推薦

添加回答

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

熱搜

最近搜索清空

兩列布局左側(cè)固定右側(cè)寬高自適應(yīng)老是有問題？

兩列布局左側(cè)固定右側(cè)寬高自適應(yīng)老是有問題？

2 回答

相關(guān)問題推薦

添加回答

兩列布局左側(cè)固定右側(cè)寬高自適應(yīng)老是有問題？