在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 左邊固定、右邊自適應(yīng)

左邊固定、右邊自適應(yīng)

需要實(shí)現(xiàn)后臺(tái)布局。
1、header:高100px;
2、sidebar：定寬260px，與main等高，最小高度為瀏覽器窗口高度；
3、main：不定寬，與sidebar等高，最小高度為瀏覽器窗口高度。
4、sidebar與main都要自適應(yīng)。
請(qǐng)問(wèn)如何實(shí)現(xiàn)？謝謝。
圖片描述

圖片描述

回答
編輯回答
司令

剛好這兩天在弄一個(gè)在線手冊(cè)，研究到這個(gè)布局

//左側(cè)右側(cè)皆浮動(dòng)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
      *{margin:0;padding:0;}
      html,body{height: 100%;}
      #header{background: #eee;height: 100px;}
      #left {
           background-color: green;
           float: left;
           width: 260px;
           margin-right: -100%;
           min-height: calc(100% - 100px);
      }
      #content {
        float: left;
        width: 100%;
        height: calc(100% - 100px);
      }
      #body {
        min-height: 100%;
        margin-left: 260px;
        background-color: orange;
      }
    </style>
</head>
<body>
    <div id="header">top</div>
    <div id="left">
        left
    </div>
    <div id="content">
        <div id="body">
            right
        </div>
    </div>
</body>
</html>

//絕對(duì)定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        html,body{height: 100%;}
        #header{background: #eee;height: 100px;}
           #left {
           background-color: green;
           position: absolute;
           left: 0;
           top: 100px;
           bottom: 0;
           width: 260px;
           }
       #content {
            /*使用calc確定高度*/
            background-color: orange;
            margin-left: 260px;
            min-height: calc(100% - 100px);
            /*也可以全部絕對(duì)*/
            /*position: absolute;
            left: 260px;
            right: 0;
            top: 100px;
            bottom: 0;*/
       }
    </style>
</head>
<body>
    <div id="header">header</div>
    <div id="left">
        left
    </div>
    <div id="content">
        right
    </div>
</body>
</html>

都能實(shí)現(xiàn)下圖效果
圖片描述

不過(guò)題主這個(gè)要求左右兩側(cè)最低高度是瀏覽器窗口高度要用到calc方法，這個(gè)在FF里兼容性不好。
其實(shí)可以直接設(shè)定一個(gè)固定尺寸應(yīng)該也合適的，比如600px...

2017年2月16日 12:39
編輯回答
哎呦喂
html,body{
    height:100%;
}
header{
height:100px;
}
sidebar{
    float:left;
    width:260px;
    min-height:calc(100% - 100px); 
}
main{
 min-height:calc(100% - 100px); 
width:calc(100% - 260px);
 float:left;
}
2017年1月15日 00:06