css中子元素根據父元素設定百分比高度的問題。
之前用css的flex設定了一系列a標籤,在a標籤中準備再巢狀幾個div,使a標籤的樣式更好看一點。先給大家看看之前我寫的程式碼。
但是執行出來的效果就是.bottom_pic的高度設定沒有效果,寬度是有效果的。<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_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屬性的元素,這時候我們會發現父元素塌陷,高度為0,因為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