国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

flex 布局實(shí)現(xiàn)固定頭部和底部，中間滾動(dòng)布局

Pines_Cheng / 2375人閱讀

摘要：關(guān)鍵詞，實(shí)現(xiàn)和固定，中間多了滾動(dòng)，少了撐滿和寬度根據(jù)內(nèi)容撐起，當(dāng)然你可以自己設(shè)置小二，上代碼來(lái)嘍布局關(guān)鍵的來(lái)啦關(guān)鍵，布局關(guān)鍵，三塊主題擺放。

關(guān)鍵詞：display: flex，flex: 1,? overflow-y: scroll;

實(shí)現(xiàn)：head 和footer 固定，中間body多了滾動(dòng)，少了撐滿； head和footer寬度根據(jù)內(nèi)容撐起，當(dāng)然你可以自己設(shè)置........

小二，上代碼！

來(lái)嘍~~

// html布局
<html>
<body>
<div class="container">
    <div class="head">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPagediv>
    <div class="body">
      <div>orry, but the page you were trying to view does not exist.div>
       <div>shhhhsssdiv>
      <div>shhhhsssdiv>
      <div>shhhhsssdiv>
      <div>shhhhsssdiv>
      <div>shhhhsssdiv>
    div>
 <div class="footer">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not Founddiv>
div>
body>
html>

關(guān)鍵的css來(lái)啦！

 2 * {
 3             line-height: 1.2;
 4             margin: 0;
 5 }
 6  html, body {
 7             font-family: sans-serif;
 8             height: 100%;
 9             width: 100%;
10 }
11 .container{
12      display: flex; // 關(guān)鍵， flex布局
13      flex-direction: column; // 關(guān)鍵，三塊主題column擺放。
14      height: 100vh; // 關(guān)鍵，設(shè)置高度為可見(jiàn)高度的100%；        
15 }
16 .head{ 
17     width: 100%;
18     background: springgreen;
19 }
20 .body{
21      flex: 1; // 關(guān)鍵， 填充剩余空間
22      width: 100%;
23      background: lightyellow;
24      overflow-y: scroll;   // 關(guān)鍵， 超出部分滾動(dòng)
25 }
26 .footer{
27     width: 100%;
28     background: goldenrod;
29 }

?附上全部代碼，可以自己復(fù)制到瀏覽器中打開(kāi)，看效果~

doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Page Not Foundtitle>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

        * {
            line-height: 1.2;
            margin: 0;
        }

        html, body {
            color: #888;
            font-family: sans-serif;
            height: 100%;
            width: 100%;
        }
        .container{
          display: flex;
          height: 100vh;
          flex-direction: column;
        }
        .head{
          width: 100%;
          background: springgreen;
        }
        .body {
          background: lightyellow;
          width: 100%;
          flex:1;
          color: black;
          overflow-y: scroll;
        }
        .footer {
          background: goldenrod;
          width: 100%;
        }
        .body div {
          height: 200px;
          width: 300px;
          background: greenyellow;
          margin: 20px;
        }
    style>
head>
<body>
<div class="container">

    <div class="head">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not Founddiv>
    <div class="body">
      <div>orry, but the page you were trying to view does not exist.div>
       <div>shhhhsssdiv>
      <div>shhhhsssdiv>
      <div>shhhhsssdiv>
      <div>shhhhsssdiv>
      <div>shhhhsssdiv>
    div>
 <div class="footer">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not Founddiv>
div>
body>
html>

?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/970.html

相關(guān)文章

  • flex 布局實(shí)現(xiàn)固定頭部和底部，中間滾動(dòng)布局

    摘要：關(guān)鍵詞，實(shí)現(xiàn)和固定，中間多了滾動(dòng)，少了撐滿和寬度根據(jù)內(nèi)容撐起，當(dāng)然你可以自己設(shè)置小二，上代碼來(lái)嘍布局關(guān)鍵的來(lái)啦關(guān)鍵，布局關(guān)鍵，三塊主題擺放。關(guān)鍵詞：display: flex，flex: 1,? overflow-y: scroll; 實(shí)現(xiàn)：head 和footer 固定，中間body多了滾動(dòng)，少了撐滿； head和footer寬度根據(jù)內(nèi)容撐起，當(dāng)然你可以自己設(shè)置........ 小二，...

    cfanr 評(píng)論0 收藏0

  • flex 布局實(shí)現(xiàn)固定頭部和底部，中間滾動(dòng)布局

    摘要：關(guān)鍵詞，實(shí)現(xiàn)和固定，中間多了滾動(dòng)，少了撐滿和寬度根據(jù)內(nèi)容撐起，當(dāng)然你可以自己設(shè)置小二，上代碼來(lái)嘍布局關(guān)鍵的來(lái)啦關(guān)鍵，布局關(guān)鍵，三塊主題擺放。關(guān)鍵詞：display: flex，flex: 1,? overflow-y: scroll; 實(shí)現(xiàn)：head 和footer 固定，中間body多了滾動(dòng)，少了撐滿； head和footer寬度根據(jù)內(nèi)容撐起，當(dāng)然你可以自己設(shè)置........ 小二，...

    antyiwei 評(píng)論0 收藏0

  • flex 布局實(shí)現(xiàn)固定頭部和底部，中間滾動(dòng)布局

    摘要：關(guān)鍵詞，實(shí)現(xiàn)和固定，中間多了滾動(dòng)，少了撐滿和寬度根據(jù)內(nèi)容撐起，當(dāng)然你可以自己設(shè)置小二，上代碼來(lái)嘍布局關(guān)鍵的來(lái)啦關(guān)鍵，布局關(guān)鍵，三塊主題擺放。關(guān)鍵詞：display: flex，flex: 1,? overflow-y: scroll; 實(shí)現(xiàn)：head 和footer 固定，中間body多了滾動(dòng)，少了撐滿； head和footer寬度根據(jù)內(nèi)容撐起，當(dāng)然你可以自己設(shè)置........ 小二，...

    Shimmer 評(píng)論0 收藏0

  • 移動(dòng)開(kāi)發(fā)中固定布局

    摘要：記錄一下移動(dòng)開(kāi)發(fā)過(guò)程中出現(xiàn)的問(wèn)題。若是涉及到移動(dòng)開(kāi)發(fā)布局中碰到固定某一部分，其余部分可滾動(dòng)，盡量不要使用可用替代，若是不需要考慮兼容性，用更佳。 記錄一下移動(dòng)開(kāi)發(fā)過(guò)程中出現(xiàn)的問(wèn)題。從最常見(jiàn)的布局說(shuō)起，固定頭部或底部算是最常見(jiàn)的需求了假定頁(yè)面布局如下： 實(shí)現(xiàn)頭部、底部固定，中間滾動(dòng)，有三種簡(jiǎn)單實(shí)現(xiàn)方式： fix...

    XFLY 評(píng)論0 收藏0

  • 移動(dòng)開(kāi)發(fā)中固定布局

    摘要：記錄一下移動(dòng)開(kāi)發(fā)過(guò)程中出現(xiàn)的問(wèn)題。若是涉及到移動(dòng)開(kāi)發(fā)布局中碰到固定某一部分，其余部分可滾動(dòng)，盡量不要使用可用替代，若是不需要考慮兼容性，用更佳。 記錄一下移動(dòng)開(kāi)發(fā)過(guò)程中出現(xiàn)的問(wèn)題。從最常見(jiàn)的布局說(shuō)起，固定頭部或底部算是最常見(jiàn)的需求了假定頁(yè)面布局如下： 實(shí)現(xiàn)頭部、底部固定，中間滾動(dòng)，有三種簡(jiǎn)單實(shí)現(xiàn)方式： fix...

    Travis 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<