css中子元素根據父元素設定百分比高度的問題。

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

之前用css的flex設定了一系列a標籤，在a標籤中準備再巢狀幾個div，使a標籤的樣式更好看一點。先給大家看看之前我寫的程式碼。

<style>
.bottom_menu
{
display:-webkit-box;
display:-moz-box;
height:14%;
width:100%;
border:1px solid black;
}
.bottom_menu_a
{
-moz-box-flex:1.0;
-webkit-box-flex:1.0;
border:1px solid black;
}
.bottom_pic
{
width:100%;
height:70%;
}
</style>
<body>
    <div class="bottom_menu">
        <a href="#" class="bottom_menu_a">
            <div class="bottom_pic">
            </div>
        </a>
    </div>
<body>

但是執行出來的效果就是.bottom_pic的高度設定沒有效果，寬度是有效果的。

原因就是：子元素的百分比高度是根據父元素的高度來確定的，當父元素的高度為不確定值時，或者說父元素的高度未定義時，子元素的高度百分比將沒有用（沒有參照物）。所以只要設定了父元素的高度，子元素的高度百分比才會有用。

所以說上述程式碼中，只要把.bottom_pic的父元素的高度定義了就可以了。

所以只需要在.bottom_menu_a的css樣式中加上一句：

height:100%;

這樣就可以了。也就是我們所說的定義父元素的高度。

css中子元素根據父元素設定百分比高度的問題。

之前用css的flex設定了一系列a標籤，在a標籤中準備再巢狀幾個div，使a標籤的樣式更好看一點。先給大家看看之前我寫的程式碼。 <style> .bottom_menu { display:-webkit-box; display:-moz-box; hei

【css】div父元素根據子元素高度自適應高度

兩種情況(無特殊說明子元素都是指代父元素的第一級子元素) 第一種:若子元素沒有帶有float元素的元素,對於高度是自適應的沒有問題. 第二種:若子元素全是帶有float屬性的元素,這時候我們會發現父元素塌陷,高度為０,因為float浮動元素脫離了正常的文件流,

css設置時父元素隨子元素margin值移動

float -h overflow pad 方法 htm 絕對定位 padding mar 父元素的盒子包含一個子元素盒子，給子元素盒子一個垂直外邊距margin-top,父元素盒子也會往下走margin-top的值，而子元素和父元素的邊距則沒有發生變化。 HTML，CSS

純CSS讓子元素突破父元素的寬度限制

純CSS讓子元素突破父元素的寬度限制在寫樣式中，我們可以經常看到這樣的情況程式碼如下 <div style="width: 300px;border: 4px solid #000;margin: 20px;padding: 2px;"> 父元素

CSS子元素選擇父元素

通常一個CSS選擇器都是從上往下選擇的，通過父元素選擇子元素，那麼能不能通過子元素選擇父元素呢？ <ul> <li> <a href="#" class="active">1</a> </li>

設定絕對定位對於子元素繼承父元素的高度的影響

筆者在寫網頁時，發現一個問題，當一個父元素沒有設定高度，而全靠子元素1撐起高度時，此時子元素2就無法繼承父元素的100%高度，程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset

video無法自動播放以及不能根據父元素自適應大小

1、video添加了autoplay="autoplay"後還是不能自動播放，查閱資料後，在標籤內新增 muted，親測有效 <video src="video/pic_1536759760%20(1).mp4" muted autoplay="autoplay" s

CSS子元素跟父元素的高度一致

絕對定位方法：（1）將父元素設定為相對定位，不寫父元素的高度時，會隨著左邊的子元素高度變化而變化 .parent { /*關鍵程式碼*/ position: relative; /*其他樣式*/ width: 800px;

css為何不支援父元素選擇器

為何CSS不支援父選擇器？這個問題的答案和“為何CSS相鄰兄弟選擇器只支援後面的元素，而不支援前面的兄弟元素？”是一樣的。瀏覽器解析HTML文件，是從前往後，由外及裡的。所以，我們時常會看到頁面先出現頭部然後主體內容再出現的載入情況。但是，如果CSS支援了父選擇器，那就必須要

【CSS黑魔法】父元素無高度情況下的子元素高度自適應方法

前言：　　此方法IE6以上（不包括IE6）瀏覽器均可行。正題：　　問題重現：　　　　當一個沒有設定高度的父級元素下擁有兩個子元素（為了方便，就用兩個就好了，不代表一定是兩個），一個子元素有高度或被內容撐開（這時候父元素被撐開了），另一個子元素我們希望讓他高度根據父元

CSS 子元素在父元素中垂直居中

父元素設定為相對佈局，子元素設定為絕對佈局，並且設定上下左右邊距都為0，設定子元素的寬度為500px,這樣就是子元素佔據了整個容器，此時margin設定為auto才起作用，具體程式碼如下： <!DOCTYPE html> <html lang

js在父元素上添加點擊事件，怎麽阻止子元素繼承父元素的點擊事件？

!= fun 元素 spa clas urn else target click div.onclick = function(ev){ if(ev.target!=this) return; else { ... } }js在父元素

如果通過當前元素知道父元素、同級元素

父元素、子元素基本的思路是知道了當前元素，可以通過xpath的方法找到父元素，知道了父元素之後，就可以通過父元素找子元素的方法找到同級元素。以百度搜索輸入框為例子，找到輸入框的父元素，一種是通過..來選擇，另外一種通過xpath 軸來尋找，代碼如下：from selenium import webdrive

讓子元素在父元素中水平居中align-items

lex 交叉點理解 item ima mar enter spl eas 做案例中，我們會發現讓子元素在父元素中垂直居中，要設置margin和padding等，各種設置才能垂直居中現在可以使用CSS3中的align-items實現 align-items 定義子元素在

justify-content 定義子元素在父元素水平位置排列的順序

排版 end 子元素效果 mage 分享 con common pla justify-content 定義子元素在父元素水平位置排列的順序，需要和display:flex使用才會生效。有五個屬性： 1.flex-start(默認值) 左對齊 2.flex-end 右

子元素scroll父元素容器不跟隨滾動JS實現

方法事件 tip 滾動頁面學習 ima 使用方法阻止補充小tip: 子元素scroll父元素容器不跟隨滾動JS實現本文地址（轉載）：http://www.zhangxinxu.com/wordpress/?p=5092 一、開場暖身網上常見蹲來蹲去的

Vue.js如何獲得兄弟元素，子元素，父元素（DOM操作）

<button @click = “clickfun($event)”>點選</button> methods: { clickfun(e) { // e.target 是你當前點選的元素 // e.currentTarget 是你繫結事件的元素 } }, #獲得點選元素的

子元素等分父元素,平分

方式一: 父級元素定義display:flex,子元素寬度用flex來定義,flex:1 是均分父級元素。佔的比例相同（蘋果6部分低版本瀏覽器不支援, 儘量不要用） .user-set{ &nb

浮動之後子元素在父元素哪個位置

浮動定為是CSS中重要的排版手段，比如首字的放大和圖文混排，float浮動可以設定left right 和none，當設定左或右浮動時元素會向父元素的左側或右側靠近，這個距離是怎麼回事呢？我們來看下沒浮動之前float1的寬度充滿整個父塊，空隙是僅僅就是父塊的內邊距加上它自己的外邊距浮動之

Vue.js 獲得兄弟元素，子元素，父元素（DOM操作）

pre lin col bsp 操作 attr current 綁定 tar 　　e.target 是你當前點擊的元素 e.currentTarget 是你綁定事件的元素 e.currentTarget.previousEle

css中子元素根據父元素設定百分比高度的問題。

相關推薦