2. 程式人生 > >CSS實現頭尾高度固定，中部內容百分百填充

CSS實現頭尾高度固定，中部內容百分百填充

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

效果圖：
這裡寫圖片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    html {
        height: 100%;
    }

    body {
        height: 100%;
    }

    .container {
        height: 100%;
        position
 
: relative;
    }

    .header {
        height: 50px;
        width: 100%;
        top:0;
        background-color: red;
        position: absolute;
    }

    .content {
        width: 100%;
        background-color: lime;
        top:50px;
        bottom:50px;
        position: absolute;
        overflow
 
: auto;
    }
    footer{
        width:100%;
        height:50px;
        position:absolute;
        bottom:0;
        background-color: red;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            這是標題
        </div>
        <div
 
 class="content">
            <h1>diyige</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>zuihoude</h1>
        </div>
        <footer>
            這是腳註
        </footer>
    </div>
</body>

</html>

而且這也是支援響應式的。

相關推薦

CSS實現頭尾高度固定，中部內容百分百填充

效果圖： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

使用css實現頁面頭部固定，下面隨著內容的增多滾動，但是頭部不動的效果

注意：下面這個地方的*{margin:0; padding:0}不要刪掉，會影響頁面整體顯示樣式 <!DOCTYPE html> <html> <head> &l

css前端頭尾部固定，中間內容可滑動

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>頭尾固定中間高度自適應佈局</title>

簡單實現頂部固定，中部自適應布局

col position fix enter span text auto pos otto 最近在重構web導航的時候就發現一個問題，如何實現頂部固定，中部自適應的布局。 很多人會認為這很簡單啊，頂部使用position: fixed;就可

常用css上下佈局-上邊高度固定，下邊高度自適應

 上下兩個盒子，上邊的固定，下面的自適應 <div class= "container"> <div class="left"></div> <div class="right"></div> </div

css實現兩欄佈局，左側固定寬，右側自適應的七種方法

一個面試會問的問題，如何實現兩個盒子，左側固定寬度，右側自適應。 下面是實現的其中方法： 1、利用 calc 計算寬度的方法 css程式碼如下： .box{overflow: hidden;height: 100px;margin: 10px 0;} .box&

css 頭部和底部固定，中間高度自適應，出滾動條 css程式碼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initia

實現表格標題欄固定，當內容超出指定寬度出現滾動條後會破壞原有佈局，這時可以用perfect-scrollbar外掛

方法一：標題欄和內容在同一表格 1、如果在同一表格標題欄必須要加<thead></thead>標籤，內容必須要用<tbody></tbody>標籤包裹，並使兩者變成塊元素。      

css實現單選效果，看看有趣的tabIndex

技術分享 分享 多說 有趣的 gif tab abi tabindex img 以前我實現單選變色幾乎都是用js實現的，今天看到有個css屬性可以直接實現單選變色，很開心啊~ 話不多說看效果 實現的代碼如下 使用tabIndex還可以實現別的有趣的效果 話不多說看效果

【CSS】右邊寬度固定，左邊自適應

右邊寬度固定，左邊自適應 第一種： <style> body{ display: flex; } .left{ background-color: rebeccapurple; height: 200px; flex: 1; } .righ

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

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

純css實現傾斜tab切換，並且加上兩邊圓角

前端開發過程中難免會遇到傾斜的tab設計，並且兩邊要做成圓角效果，如下圖： 我的想法：     1. 給每個tab項設定transform：skew(角度值)實現傾斜效果，但是，此時裡邊內容也會跟著傾斜，所以給內容單獨加一個容器，給該容器重新設定偏轉回去即可；  

史上最牛逼的純CSS實現tab選項卡，閃瞎你的狗眼

                     html檔案<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>CSS3外觀漂亮淡入淡出Tab選單演示<

textarea寬度固定，自動增高 input高度固定，自動增寬

                [javascript] view plain copy print?input高度固定，自動增寬<br>  <input type="text" style="width:60;overflow-x:visible;overflow-y:visible;"&

高度固定，左右寬度300，中間自適應

方法1：浮動 左邊盒子左浮動，寬度為300px,右邊盒子右浮動，寬度為300px,給div設定一個min-height:100px,中間盒子設定margin:0 300px. 方法2：定位  整個div都用絕對定位，左邊盒子left:0,width:300px;右邊盒子right:0,widt

CSS實現背景圖片固定寬高比自適應調整

    <img>標籤可以使圖片在保持寬高比不變的情況下自動調整。我們討論的是div的背景圖片實現固定寬高比自適應調整的方法。這裡的圖片不是< img>標籤一樣通過src引入，而是通過css的background-image: url('路徑')實現。 &

css實現div高度根據自適應寬度（百分比）調整

在如今響應式佈局的要求下，很多能自動調整尺寸的元素能夠做到高寬自適應，如img，通過{width:50%;height:auto;}實現圖片高度跟隨寬度比例調整。 然而，用的最多的標籤一哥Div卻不能做到自動調整（要麼從父級繼承，要麼自行指定px，要麼給百分比！但是這個

fullpage.js結合animate.css實現滾屏動畫，詳細講解，附下載地址

fullpage.js結合animate.css實現滾屏動畫：【點選下載】----------------------------------------------------------------

頭部和底部固定，中間內容可滾動

html+css的程式碼的展示<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><

html上下佈局，上方高度固定，下方高度自動填滿

要實現如下圖所示的佈局： 說明：這種頁面佈局十分常用，上方為固定高度，下方自動填滿下方高度；下方左側為固定寬度，下方右側自動填滿剩餘寬度。 <style> html, body { height: 100%; padding: 0; margin: 0;