日本免费电影一区,亚洲第一性理论片,亚洲一区二区三区视频免费观看

本文介紹了IE8 中具有 100% 內容高度的頁眉/頁腳布局的處理方法，對大家解決問題具有一定的參考價值，需要的朋友們下面隨著小編來一起學習吧！

問題描述

限時送ChatGPT賬號..

我一直試圖弄清楚如何在沒有 JavaScript 和填充的情況下實現這一目標，但到目前為止，這是不可能完成的任務.有誰知道純CSS和div有什么辦法可以實現簡單的布局:

http://jsfiddle.net/zLzg8v3s/1/

這正是我想要做的，但使用 div 和 CSS:

http://jsfiddle.net/u0u7snh6/1/

HTML

<body class="table"><div id="header" class="tableRow" id="top" role="banner"><div class="tableCell">這是頂部橫幅</div></div></div><div class="tableRow 表格內容"><div class="tableCell"><div id="內容">這是內容</div></div></div><div id="footer" class="tableRow" id="bottom"><div class="tableCell">這是頁腳</div></div></div></身體>

CSS

html, 正文 {高度:100%；邊距:0；填充:0；}.桌子 {顯示:表格；高度:100%；寬度:100%；}.tableRow {顯示:表格行；文本對齊:居中；高度:1px；}.tableCell {顯示:表格單元格；垂直對齊:中間；}.tableCell div {最大寬度:400px；邊距:自動；背景顏色:棕色；}.tableContent {高度:100%；背景顏色:黃色；垂直對齊:中間；}.tableContent * {高度:100%；垂直對齊:中間；邊距:自動；}.contentDiv {邊距:自動；位置:絕對；頂部:0；左:0；底部:0；右:0；}#標題{背景顏色:粉紅色；}#頁腳{背景顏色:橙色；}

這是盡可能接近布局...我無法解決的問題:

1) Content div 內的內容應該垂直居中對齊(非常重要的是內容單元格的 BG 也是 100% 高度，因此它連接到頁眉和頁腳)

2) 不應該有任何溢出:這只是 IE8 行為(據我所知)，所以在 JsFiddle 中很難看到......下面的完整代碼可以用IE8的仿真模式在本地測試:

<!doctype html><html lang="en-CA" 前綴="og: http://ogp.me/ns#"><頭><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>模型</title><風格>html，正文 {高度:100%；邊距:0；填充:0；}.桌子 {顯示:表格；高度:100%；寬度:100%；}.tableRow {顯示:表格行；文本對齊:居中；高度:1px；}.tableCell {顯示:表格單元格；垂直對齊:中間；}.tableCell div {最大寬度:1200px；邊距:自動；背景顏色:棕色；}.tableContent {高度:100%；背景顏色:黃色；垂直對齊:中間；}.tableContent * {高度:100%；垂直對齊:中間；邊距:自動；}.contentDiv {邊距:自動；位置:絕對；頂部:0；左:0；底部:0；右:0；}#標題{背景顏色:粉紅色；}#頁腳{背景顏色:橙色；}</風格></頭><body class="table"><div id="header" class="tableRow" id="top" role="banner"><div class="tableCell">這是頂部橫幅</div></div></div><div class="tableRow 表格內容"><div class="tableCell"><div id="內容">這是內容</div></div></div><div id="footer" class="tableRow" id="bottom"><div class="tableCell">這是頁腳</div></div></div></身體></html>

解決方案

好的，在你的代碼中找到了問題:http://jsfiddle.net/zLzg8v3s/9/對于 IE8 測試:http://jsfiddle.net/zLzg8v3s/9/show/

CSS:

#content{邊距:0 自動；}

從您的 CSS 中刪除:

 .tableContent * {高度:100%；垂直對齊:中間；邊距:自動；}

刪除星號修復了所有問題.

解決方案:2 JSFIDDLE: http://jsfiddle.net/p1bbyfqa/2/

HTML:

 <div id="container"><div 類="標題"><h4>這是標題</h4></div><div 類="行"><div 類="內容"><div class="left">左列</div><div class="middle">Middle Col<br/>中列<br/>中列<br/>中列<br/>中列<br/></div><div class="right">右列</div></div></div><div 類="頁腳"><h4>這是頁腳</h4></div></div>

CSS:

 html, 正文 {高度:100%；邊距:0；填充:0；}#容器 {顯示:表格；高度:100%；寬度:100%；文本對齊:居中；}.排  {顯示:表格行；寬度:100%；高度:100%；}.頁眉頁腳{背景:粉紅色；顯示:表格行；文本對齊:居中；垂直對齊:中間；}.內容 {顯示:表格；背景:棕色；寬度:100%；高度:100%；溢出:自動；}.左右{背景:綠色；顯示:表格單元格；寬度:10%；垂直對齊:中間；}.中間{背景:棕色；顯示:表格單元格；垂直對齊:中間；}

I've been trying to figure how to achieve this without JavaScript and padding and so far it's been mission impossible. Does anyone know if there is any way with pure CSS and divs to achieve a simple layout:

http://jsfiddle.net/zLzg8v3s/1/

This is exactly what I'm trying to do but with divs and CSS:

http://jsfiddle.net/u0u7snh6/1/

HTML

<body class="table">
<div id="header" class="tableRow" id="top" role="banner">
    <div class="tableCell">
        <div>
            This is the top banner
        </div>
    </div>
</div>
<div class="tableRow tableContent">
    <div class="tableCell">
        <div id="content">
            This is the content
        </div>
    </div>
</div>
<div id="footer" class="tableRow" id="bottom">
    <div class="tableCell">
        <div>
            This is the footer
        </div>
    </div>
</div>
</body>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.table {
    display: table;
    height: 100%;
    width: 100%;

}
.tableRow {
    display: table-row;
    text-align: center;
    height: 1px;
}

.tableCell {
    display: table-cell;
    vertical-align: middle;

}

.tableCell div {
    max-width: 400px;
    margin: auto;
    background-color: brown;
}

.tableContent {
    height: 100%;
    background-color: yellow;
    vertical-align: middle;
}

.tableContent * {
    height: 100%;
    vertical-align: middle;
    margin: auto;
}

.contentDiv {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

#header {
    background-color: pink;
}
#footer {
    background-color: orange;
}

This is as close as I can get to the layout... what I cannot fix:

1) The content inside the Content div should be vertically aligned middle (very important that the BG of the content cell also is 100% height so it connects to the header and footer)

2) There should not be any overflow: this is a IE8 behavior only (as far as I could tell), so it will be hard to see in JsFiddle... the full code below can be tested locally with IE8's emulation mode:

<!doctype html>
<html lang="en-CA" prefix="og: http://ogp.me/ns#">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>MOCKUP</title>

    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .table {
            display: table;
            height: 100%;
            width: 100%;

        }
        .tableRow {
            display: table-row;
            text-align: center;
            height: 1px;
        }

        .tableCell {
            display: table-cell;
            vertical-align: middle;

        }

        .tableCell div {
            max-width: 1200px;
            margin: auto;
            background-color: brown;
        }

        .tableContent {
            height: 100%;
            background-color: yellow;
            vertical-align: middle;
        }

        .tableContent * {
            height: 100%;
            vertical-align: middle;
            margin: auto;
        }

        .contentDiv {
            margin: auto;
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
        }

        #header {
            background-color: pink;
        }
        #footer {
            background-color: orange;
        }

    </style>
</head>
<body class="table">
<div id="header" class="tableRow" id="top" role="banner">
    <div class="tableCell">
        <div>
            This is the top banner
        </div>
    </div>
</div>
<div class="tableRow tableContent">
    <div class="tableCell">
        <div id="content">
            This is the content
        </div>
    </div>
</div>
<div id="footer" class="tableRow" id="bottom">
    <div class="tableCell">
        <div>
            This is the footer
        </div>
    </div>
</div>
</body>
</html>

解決方案

Okay found the problem in your code: http://jsfiddle.net/zLzg8v3s/9/ For IE8 testing : http://jsfiddle.net/zLzg8v3s/9/show/

CSS:

#content{
   margin: 0 auto;
}

Remove this from your css:

  .tableContent * {
     height: 100%;
     vertical-align: middle;
     margin: auto;
 }

Removing the asterisk fixed everything.

Solution: 2 JSFIDDLE: http://jsfiddle.net/p1bbyfqa/2/

HTML:

  <div id="container">
      <div class="header">
         <h4>This is header</h4>
      </div>
      <div class="row">
         <div class="content">
            <div class="left">Left Col</div>
            <div class="middle">Middle Col<br  />
               Middle Col<br  />
               Middle Col<br  />
               Middle Col<br  />
               Middle Col<br  />
            </div>
            <div class="right">Right Col</div>
         </div>
    </div>
    <div class="footer">
         <h4>This is footer</h4>
    </div>
</div>

CSS:

    html, body {
         height: 100%;
         margin: 0;
         padding: 0;
    }

    #container {
       display: table;
       height: 100%;
       width: 100%;
       text-align: center;
   }

   .row  {
    display: table-row;
    width:100%;
    height: 100%;

   }

   .header, .footer{
     background: pink;
     display:table-row;
     text-align: center;
     vertical-align: middle;
   }

   .content {
       display: table;
       background: brown;
       width:100%;
       height: 100%;
       overflow: auto;
    }
   .left, .right{
      background: green;
      display: table-cell;
      width:10%;
      vertical-align: middle;
    }
    .middle{
       background: brown;
       display: table-cell;
       vertical-align: middle;
    }

這篇關于IE8 中具有 100% 內容高度的頁眉/頁腳布局的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！

【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！

久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

IE8 中具有 100% 內容高度的頁眉/頁腳布局

問題描述

相關文檔推薦