div等元素height:100%高度為什麼不生效

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

以前一直很鬱悶一個問題，為什麼設定height:100%不生效，尤其是設定body:height:100%不生效，後來就很少使用了這個了。

今天在學習谷歌地圖時關於height:100%看到了解答：

In specific, all percentage-based sizes must inherit from parent block elements, and if any of those ancestors fail to specify a size, they are assumed to be sized at 0 x 0 pixels

具體地講，所有基於本分比的尺寸必須從父塊元素繼承，並且如果任一父項未能指定尺寸，則它們的尺寸假定為0 x 0畫素

所以我特地有查看了我只設定body的height:100%的情況，發現body的高度就為0，所以子元素的高度設定為height:100%也為0,如下
這裡寫圖片描述

這裡寫圖片描述

那原因是因為body設定的height:100%要從它的父塊元素那裡繼承，但它的父塊元素html沒有設定高度，檢視html的height:

這裡寫圖片描述

當我再html設定了height:100%後，body和div設定的height:100%便生效了

body的height:100%有作用了：

這裡寫圖片描述

div的height:100%有作用了：
這裡寫圖片描述

當然html也有高度了：
這裡寫圖片描述

可以測試本例子的完整程式碼：

<!DOCTYPE html>
<html 
>
    <head>
        <title></title>
        <style type="text/css">
            html,body { height: 100%;margin: 0; padding: 0;}
            #map { height: 100%; }
        </style>
        <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false" 
></script>     

    </head>
    <body>
        <div id="map"></div>
        <script type="text/javascript">
            var map ;
            function initMap(){
                map = new google.maps.Map(document.getElementById('map'),{
                    center: {lat: -34.397, lng: 150.644},
                    zoom: 8

                });
            }
            initMap();

        </script>

    </body>
</html>

通過谷歌地圖的學習明白了為什麼之前設定的height:100%不生效，尤其是body也設定了height:100%，但一直沒去想它的父元素height沒設定高度，導致高度為0.因為父元素沒高度，父元素的父元素也沒高度，要同時將body和html都設定高度。

div等元素height:100%高度為什麼不生效

以前一直很鬱悶一個問題，為什麼設定height:100%不生效，尤其是設定body:height:100%不生效，後來就很少使用了這個了。今天在學習谷歌地圖時關於height:100%看到了解答： In specific, all percentag

jquery監聽div等元素的內容變化

方法一：change事件 change事件，在元素的值發生改變時觸發，適用於文字域、textarea、select 。或呼叫change()方法時可以監聽。所以，我們可以模擬change為非表單元素監聽change()事件。 <!Doctype> <html&g

CSS中height 100%高度無效的原理解析

我們在body中定義一個div設定 width:100%;height:100%;background-color: #666666;用F12檢視，發現div並沒有鋪滿全屏，那麼我們來解析下原因：在css中因為父元素沒高度，父元素的父元素也沒高度，所以div也就沒有高度，簡單來說，塊級元素的基本尺寸都是從

父容器display:flex後，子元素的內部元素height:100%無效解決方法

父容器display:flex後，子元素的內部元素height:100%無效解決方法解救辦法：父類容器position:relative;子元素：position:absolute;width:100%,height:100%; 效果圖：程式碼如下：

tr，td高度不生效

功能：表格內容較長，但是頁面高度有限，超出顯示滾動條阻礙：給tr或者td加高度都不生效，不限時滾動條解決方案：td中加div，設定高度和內容溢位時的樣式 1 <table border='1' width='300'> 2 <tr> 3 <th>

接入百度廣告sdk遇到開屏廣告黑屏和listView item高度不生效問題

黑屏和item高度不生效的解決方案都一樣. 經對比發現把佈局的根佈局直接巢狀給百度展示的view就會遇到閃屏問題,把佈局的根佈局多巢狀一層,再給百度展示的view就沒有問題了. 同樣 item的高度不要直接設定到根view上面,要

CSS/html各種div 等元素居中的幾種方法

元素居中這個樣式真是有相當多的頁面都在使用，在這裡，跟大家分享幾種好用的居中方法 1、控制margin - - - - - -margin:0 auto; #d1{ width:500px; heig

float元素浮動後高度不一致導致錯位的解決辦方法

1、給父元素定義font-size:0; 浮動子元素定義需要的font-size，再定義display:inline-block;vertical-align:top; ul{ margin:0; padding:0; list-style-type:none;

web前端，jquery實現瀑布流總結7，jq動態新增div等元素

<!DOCTYPE html>  <html> <head lang="en"> <meta cha

div動態元素自適應高度

<div class="tpsetbox" ng-repeat="item in items" > <div class="tpsettitbox"><span ng-bind="item.BuildName"

css div li 使用float但高度不確定造成的錯位問題我遇到的（部分360瀏覽器問題）

今天遇到個CSS樣式問題，而且單單在部分人的360瀏覽器上出現了這樣的問題。也是考慮上的失誤及經驗上的不足。是這樣的一共是四個div,但高度不定。需要做成兩兩一行的樣式。之前沒做多大考慮，直接用了float,在大部分瀏覽器上並未出現問題。但在360瀏覽器（別人的）出現錯位

JSP動態生成頁面中使用JavaScript消除裡面沒有資訊的div等元素

$(document).ready( function(){ var label; label = docum

給動態動態生成元素繫結事件不生效解決方法

JQ動態生成的元素，無法繫結事件，查詢到的原因是：繫結事件的元素必須是構造頁面時已經存在的，假如構造元素是不存在，是後動態生成，則繫結不了，解決方法，通過on()繫結舉例:$("body").on("c

頁面設定body高度height:100%不生效解決辦法

直接body{ height: 100%; }不生效的話，那就在前面加個html吧，如下： html,body { height: 100% } 如果想要知道原理的可以參閱下面這篇文章，寫得很好

關於height:100%不生效的問題

blog 分享圖片 height 占滿 gpo png 頭部技術關於當你設置一個頁面元素的高度(height)為100%時，期望這樣元素能撐滿整個瀏覽器窗口的高度，但大多數情況下，這樣的做法沒有任何效果。你知道為什麽height:100%不起作用嗎？按常理，當我們用

讓高度百分比，height:100% 生效的3種方法

核心原理； height:100%這個概念是子節點相對於父容器而言；所以要讓此屬性生效，必要的一點就是：父容器必須具有具體的高度資訊；直接在<body>的子節點（如div中）寫height:100%是不會生效的，因為此時<body>的高度是不確定的，預設是auto；

如何讓div中的span垂直居中 ----height:100%設定div的高度

如果div中只有一個span一個元素，可以使用line-height。如果div中還有其他元素，可以設定span的css如下： .span{ position: absolute; top: 50%; transform: translateY(-50%); } 　　一、div設定百分百高

父元素為一個div，寬度高度不固定，子元素是一個塊狀元素，寬高已知，如何實現子元素在父元素內水平、垂直居中？

父元素為一個div，子元素是一個塊狀元素，寬高已知，如何實現子元素在父元素內水平、垂直居中？ 1、 //利用相對定位，讓子元素垂直居中 <!DOCTYPE html> <html> <head> <title><

子元素div高度不確定，父div自適應高度

在最外層div加以下樣式 height:100%;overflow:hidden; 其它方法： Div即父容器不根據內容自適應高度，我們看下面的程式碼： <div id="main"> <div id="content"></div&g

HTML學習之給div高度設定百分比不生效的問題（二）

這幾天在學習HTML的知識，今天想做一個極為簡單的頁面，就是分為頭部，內容和底部，本來用三個div即可，可是給div高度設定百分比時發現不生效，具體頁面乳腺，非常簡單。下面是html部分： <body> <div id="header">

div等元素height:100%高度為什麼不生效

相關推薦