css範例 - table css美化




讓div填充剩餘屏幕空間的高度 (20)

免責聲明:接受的答案給出了解決方案的想法,但我發現它有點臃腫與不必要的包裝和CSS規則。 下面是一個很少有css規則的解決方案。

HTML 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

上面的解決方案使用視口單元http://caniuse.com/#feat=flexbox ,因此IE10 +使用IE10的舊語法。

與Codepen一起玩: 鏈接到codepen

或者這一個,對於那些需要主容器在內容溢出的情況下可以滾動的鏈接鏈接到codepen

我目前正在開發一個Web應用程序,我希望內容填充整個屏幕的高度。

該頁面有一個標題,其中包含徽標和帳戶信息。 這可能是一個任意的高度。 我希望內容div能夠將頁面的其餘部分填充到底部。

我有一個標題div和一個內容div 。 目前,我正在使用如下佈局表格:

CSS和HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}
<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

頁面的整個高度都已填充,不需要滾動。

對於content div中的任何內容,設置top: 0; 會把它放在標題的正下方。 有時,內容將成為真實的表格,其高度設置為100%。 將header放在content中將不會允許此操作。

有沒有辦法在不使用table情況下達到相同的效果?

更新:

內容div元素也將高度設置為百分比。 因此, div內100%的東西將填充到底部。 至於兩個元素將達到50%。

更新2:

例如,如果標題佔用屏幕高度的20%,那麼在#content內指定為50%的表格將佔用屏幕空間的40%。 到目前為止,將整個東西包裝在一張桌子裡是唯一可行的。


僅限CSS方法(如果高度已知/固定)

當你想讓中間元素垂直跨越整個頁面時,可以使用CSS3中引入的calc()

假設我們有一個固定高度的 headerfooter元素,並且我們希望section標籤取得整個可用的垂直高度......

Demo

假設標記

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

所以你的CSS應該是

html, body {
    height: 100%;
}

header {
    height: 100px;
    background: grey;
}

section {
    height: calc(100% - (100px + 150px)); 
    /* Adding 100px of header and 150px of footer */

    background: tomato;
}

footer {
    height: 150px;
    background-color: blue;
}

因此,在這裡,我們正在做的是,加上元素的高度,並使用calc()函數從100%扣除。

只要確保你使用height: 100%; 為父元素。


Used: height: calc(100vh - 110px);

碼:

  
.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }
  
<div class="header">
    <h2>My header</h2>
</div> 
<div class="body">
    <p>The body</p>
</div> 
<div class="footer">
    My footer
</div>


CSS網格解決方案

display:gridgrid-template-rows定義body ,使用autofr value屬性。

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}

main:hover {
  height: 2000px;
  /* demos expansion of center element */
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

一個完整的網格指南@ CSS-Tricks.com



Spinning off the idea of Mr. Alien...

This seems a cleaner solution than the popular flex box one for CSS3 enabled browsers.

Simply use min-height(instead of height) with calc() to the content block.

The calc() starts with 100% and subtracts heights of headers and footers (need to include padding values)

Using "min-height" instead of "height" is particularly useful so it can work with javascript rendered content and JS frameworks like Angular2. Otherwise, the calculation will not push the footer to the bottom of the page once the javascript rendered content is visible.

Here is a simple example of a header and footer using 50px height and 20px padding for both.

Html:

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

Css:

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

Of course, the math can be simplified but you get the idea...



你如何只使用vh代表view heightCSS中 ...

看下面我為你創建的代碼片段並運行它:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}
<div class="full-height">
</div>

另外,請看下面我為你創建的圖片:


嘗試這個

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

如果您可以處理不支持舊瀏覽器(即MSIE 9或更舊版本),則可以使用http://caniuse.com/#feat=flexbox (已經是W3C CR)來執行此操作。 該模塊還允許其他很好的技巧,例如重新排序內容。

不幸的是,MSIE 9或更低版本不支持這一點,並且您必須為Firefox以外的所有瀏覽器的CSS屬性使用供應商前綴。 希望其他廠商也很快放棄前綴。

另一種選擇是CSS網格佈局,但是穩定版瀏覽器的支持更少。 實際上,只有MSIE 10支持這一點。


實際上,您可以使用display: table將區域拆分為兩個元素(標題和內容),其中標題的高度可能會有所不同,並且內容會填充剩餘的空間。 這適用於整個頁面,以及區域只是position設置為relativeabsolutefixed position的另一個元素的內容。 只要父元素的高度不為零,它就會工作。

看到這個小提琴和下面的代碼:

CSS:

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

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML:

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

對我而言(對於另一個div內的div以及我在其他情況下假設的),將底部填充設置為100%。 也就是說,添加到你的CSS /樣式表:

padding-bottom: 100%;

您可以使用CSS表格,而不是在標記中使用表格。

標記

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(相關)CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1FIDDLE2

這種方法的一些優點是:

1)較少的標記

2)標記比表格更具語義,因為這不是表格數據。

3)瀏覽器支持非常好 :IE8 +,所有現代瀏覽器和移動設備( caniuse

為了完整起見, 下面是CSS表格模型的 CSS屬性的等效Html元素

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption } 

我一直在尋找這個答案。 如果你有幸能夠瞄準IE8或更高版本,可以使用display:table和相關值來獲取包含div的塊級元素的表格渲染規則。

如果你更幸運,並且你的用戶正在使用頂級瀏覽器(例如​​,如果這是你控制的計算機上的內聯網應用,就像我最近的項目一樣),你可以在CSS3中使用新的靈活框佈局


我找到了一個非常簡單的解決方案,因為對我來說這只是一個設計問題。 我希望頁面的其餘部分在紅色頁腳下方不要變成白色。 所以我將頁面背景顏色設置為紅色。 內容backgroundcolor為白色。 將內容高度設置為例如。 20em或50%幾乎空白的頁面不會將整個頁面留下紅色。


我有同樣的問題,但我無法使用上面的flexboxes解決方案。 所以我創建了自己的模板,其中包括:

  • 具有固定大小的元素的頭部
  • 頁腳
  • 帶有滾動條的側欄佔據了剩餘的高度
  • 內容

我使用了柔印盒,但使用更簡單的方式,只使用屬性顯示:flexflex-direction:row | column

我使用角度,我希望我的組件大小是他們的父元素的100%。

關鍵是要設置所有父母的大小(百分比),以便限制其大小。 在以下示例中,myapp高度具有視口的100%。

主要組件有90%的視口,因為頁眉和頁腳有5%。

我在這裡發布我的模板: https://jsfiddle.net/abreneliere/mrjh6y2e/3https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

HTML:

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>

為什麼不只是這樣?

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

給你html和body(按照這個順序)一個高度,然後給你的元素一個高度?

適用於我


現在有很多答案,但是我發現使用高度:100vh; 在需要填充整個可用垂直空間的div元素上工作。

這樣,我不需要玩弄顯示或定位。 當使用Bootstrap來製作一個儀表板時,這有一個方便的地方,我有一個側欄和一個主界面。 我希望主體伸展並填充整個垂直空間,以便我可以應用背景顏色。

div {
    height: 100vh;
}

支持IE9及以上版本: 點擊查看鏈接


真的沒有一個健全的,跨瀏覽器的方式來做到這一點在CSS中。 假設你的佈局有復雜性,你需要使用JavaScript來設置元素的高度。 你需要做的事情的本質是:

Element Height = Viewport height - element.offset.top - desired bottom margin

一旦你可以得到這個值並設置元素的高度,你需要將事件處理程序附加到窗口onload和onresize上,以便你可以觸發你的resize函數。

另外,假設你的內容可能比視口大,你需要設置overflow-y來滾動。


 style="height:100vh"

為我解決了這個問題。 在我的情況下,我將此應用於所需的div





html-table