2. 程式人生 > >頁面佈局之上下固定中間自適應

頁面佈局之上下固定中間自適應

阿新 • • 發佈：2019-01-20

常用的頁面佈局除了兩邊固定中間自適應和一端固定另一端自適應之外，還有上下固定中間自適應的佈局，今天在這裡做一下總結。
實現這種佈局我主要通過兩種方法：

使用絕對定位

對這三欄都實現絕對定位，其中中間絕對定位的位置是上下兩欄的高度，內容超出則中間部分出現流動條；
程式碼實現：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>絕對定位實現</title>
    <style type="text/css">
 

        html,body,div{
            padding:0;
            margin:0;
        }
        .header{
            position:absolute;
            top:0; /*頭部絕對定位位置*/
            height:100px;
            width:100%;
            background: red;
        }
        .footer{
            position:absolute;
            bottom
 
:0;/*尾部絕對定位位置*/
            height:100px;
            width:100%;
            background:yellow;
        }
        .main{
            position:absolute;
            width:100%;
            top:100px; /*中間自適應部分絕對定位位置，top是頭部的高度*/
            bottom:100px; /*bottom是尾部的高度*/
            background: #ccc;
            overflow
 
:auto; /*超出的部分，滾動條顯示*/
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">我是頭部</div>
        <div class="main">
            我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>
            我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>
            我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>
            我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>我是中間自適應<br>
        </div>
        <div class="footer">我是尾部</div>
    </div>
</body>
</html>

這裡寫圖片描述

使用flex佈局

還可以使用flex佈局實現這一佈局，將flex-direction設定為column，定義排列方向為豎排，還需注意的是要定義頁面的整體高度為100%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex佈局實現</title>
    <style type="text/css">
        html,body{
            padding:0;
            margin:0;
            height:100%; /*定義頁面整體高度為100%，重要*/
        }
        .container{
            display:flex; /*父元素的定義為flex佈局*/
            height:100%; /*這裡也要定義，重要*/
            width:100%;
            flex-direction: column; /*定義排列方向為豎排*/
        }
        .header{
            height:100px; /*頭部固定高度*/
            background: red;
        }
        .footer{
            height:100px; /*尾部固定高度*/
            background: yellow;
        }
        .main{
            background: #ccc;
            flex:1; /*中間分配剩下的所有空間*/
            overflow:auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">我是頭部</div>
        <div class="main">
            我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
            我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
            我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
            我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
            我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
            我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
            我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
            我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
            我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
            我是flex佈局實現的中間自適應<br>我是flex佈局實現的中間自適應<br>
        </div>
        <div class="footer">我是尾部</div>
    </div>
</body>
</html>

這裡寫圖片描述

關於這種佈局，目前我所找到的就是這兩種方法，以後再有學習到，會來補充。

相關推薦

頁面佈局之上下固定中間自適應

常用的頁面佈局除了兩邊固定中間自適應和一端固定另一端自適應之外，還有上下固定中間自適應的佈局，今天在這裡做一下總結。 實現這種佈局我主要通過兩種方法： 使用絕對定位 對這三欄都實現絕對定位，其中中間絕對定位的位置是上下兩欄的高度，內容超出則中間部分出現流動

前端經典佈局（兩邊固定中間自適應）

一、介紹 　　下邊將介紹前端很流行的佈局方式，要求兩邊固定，中間自適應。比較流行的佈局方式有聖盃佈局，雙翼佈局，flex佈局、絕對定位佈局。 二、聖盃佈局 　　聖盃佈局，顧名思義，他具有以下特點： 　　1.三列布局，中間自適應，兩邊定寬； 　　2.中間欄要求在瀏覽器中優先展示； 　　接下來我們看實

CSS自適應佈局（左右固定中間自適應或者右側固定左側自適應）

CSS自適應佈局(左右固定 中間自適應或者右側固定 左側自適應) 經常在工作中或者在面試中會碰到這樣的問題，比如我想要個佈局 右側固定寬度 左側自適應 或者 三列布局 左右固定 中間自適應的問題。 下面我們分別來學習下，當然我也是總結下而已，有如以下方法： 一：

css三欄佈局之左右寬度固定中間自適應

1.利用浮動解決三欄佈局問題 <style lang=""> html *{ padding: 0; margin:0; } .layout .left-center-right>div { h

經典佈局---兩邊固定中間自適應

方法一：左右使用浮動，中間設定margin-left和margin-right 這種方式很簡單，就是讓左邊的左浮動，右邊的右浮動，然後通過設定中間的margin將內容從兩邊拉回來。 例項效果圖.png

上下高度固定中間自適應的布局方式

網格 span bubuko 自適應 高度 col 空白 image png （1）：定位 子盒子用絕對定位（千萬別給父盒子加相對定位） （2）flex布局 （3）使用grid網格布局: （4）使用table布局，一定要套一個空div，要不然整個頁面都是空白的

實現如下頁面佈局。核心區域左側自適應，右側固定寬度 200px

原題目：牛客網-阿里巴巴2016前端開發工程師筆試(一)：10題 要求自適應，那一開始就不能把左側content的寬度給設死了。嘗試了幾次一開始思維定式就先從左至右寫吧，於是 .cont

兩側固定 中間自適應

使用絕對定位        左右使用絕對定位 由於絕對定位脫離標準流  center會自動在左右的下面 使用margin 留出左右元素的寬度 這樣可以使中間自適應了      div 元素 &l

css實現兩欄固定中間自適應

1、利用絕對定位和margin 此方法的原理說將左右兩側進行定位，讓其脫離文件流。 中心區域自然流動到它們下面，再為其設定margin值 此方法頁面元素結構可以順序可以隨意變動， 注意top值需要進行處理，不然可能會出現對不齊現象 HTML <div id='container'>

flex與佈局（基本網格佈局、百分比佈局、一側固定一側自適應、聖盃佈局）

1、基本網格佈局 分情況討論： （1）如果所有的專案有相同的結構 <!DOCTYPE html> <html> <head> <meta charset

--------------------------三欄佈局之左右寬度固定，中間自適應--------------------------

常見的頁面佈局有 1、左右寬度固定，中間自適應； 2、上下高度固定，中間自適應； 3、左寬度固定，右自適應； 4、上高度固定，下自適應， 下邊是我看過網上的視訊後寫出來的三欄佈局-左右寬高固定，中間自適應； 1 <!DOCTYPE html><!-- html 5 --

三欄佈局（二）-------上下寬高固定，中間自適應

上一篇寫的是左右寬高固定，中間自適應，根據上一篇的內容，總結了下上下寬高固定，中間自適應的幾種佈局方式，話不多說，直接上程式碼。 <!DOCTYPE html> <html> <head> <title>上中下三欄佈局</title>

css佈局之2邊固定寬度，中間自適應

左右兩列分別左浮動和右浮動並給一個固定寬度，中間不浮動，也不設定寬度。 <div class="left">1</div> <div class="right">2</div> <div class="center">3<

頁面佈局--三欄佈局，高度已知，兩邊寬度固定，中間自適應實現方式

題目：假設高度已知，三欄佈局，其中左欄和右欄寬度為200px，中間自適應 全域性樣式 html *{ padding: 0; margin: 0; } .layout{ margin-top: 20px;

網頁上中下三分布局，上下固定，中間自適應

-i code tran eval control middle clas o-c doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h

頁面布局方案-左右固定，中間自適應

ide layout all 固定 eight 頁面布局 圖片 info image 左右固定，中間自適應 三列布局，左右固定，中間自適應，高度自適應 效果： 代碼： 1 <!DOCTYPE html> 2 <html> 3 <hea

利用display:flex; 實現三行佈局，頭尾固定，中間自適應

html如下：<div id="container"> <div id="top"></div> <div id="center"></div> <div id="bottom"&g

CSS實現三欄自適應佈局（兩邊寬度固定，中間自適應）

    所謂三列自適應佈局指的是兩邊定寬，中間block寬度自適應。這道題在今年網易內推前端工程師面試的時候也被問到。 我這裡主要分為兩大類，一類是基於position傳統

網頁佈局，左右固定，中間自適應

網頁常見佈局，左右固定，中間寬度隨螢幕尺寸自適應： <style type="text/css">      .zuo{width: 100px;height: 100px;float: left;background-color: red;border: 1p

CSS實現自適應高度佈局：頭部底部固定，中間自適應鋪滿螢幕剩餘高度，中間盒子裡左盒子固定右盒子自適應寬度

如題：頂部底部固定高度，中間部分鋪滿螢幕剩餘高度，中間盒子裡又左盒子固定寬度，右盒子自適應寬度且距左盒子總是20px 主要解決方法是中間盒子的top:40px;bottom:40px;設定。原理是在p