雖然箱子尺寸設計包含元素溢出容器

我很努力地弄清楚爲什麼我有一個高度爲100％的元素，儘管箱子尺寸被設置爲邊框，雖然箱子尺寸設計包含元素溢出容器

我做了這裏提琴：https://jsfiddle.net/a8v9a8ok/6/

我設置元素100％的高度和箱大小邊境盒還包含在一節中的文章「左」是流經部分並且它包含的text textarea也正在流逝。

html, body { 
    height: 100%; 
    width: 100%; 
} 

html { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

*, *:before, *:after { 
    -moz-box-sizing: inherit; 
    -webkit-box-sizing: inherit; 
    box-sizing: inherit; 
}

我不只是要隱藏的溢出，我想要的元素來保持其包含的容器內，並填補相應的容器100％。

我敢肯定，這是一個簡單的修復，但我一直在嘗試小時無濟於事，所以任何幫助將不勝感激！

編輯：我只是試圖讓所有的元素適合其各自的容器，而不垂直重疊。我期望將textarea高度設置爲100％應該使它填充容器中的剩餘空間。

感謝

來源

2017-08-21 ministe2003

你article元素有兩個孩子：一個input元素和textarea，其中有height: 100%。因此，articles的高度加上100％加上輸入元素的高度。這就是它溢出的原因。

爲了解決這個問題，可以給一個固定的高度，以input，例如40像素，並使用height: calc(100% - 60px) ;（減去爲餘量頂部和底部的40像素高度加2×10px的）上article。

https://jsfiddle.net/m08tsvzf/1/

來源

2017-08-21 15:05:16 Johannes

謝謝，我會盡力的。但爲什麼在輸入的高度之後它不能填滿可用空間？這是我期望的行爲 – ministe2003

，因爲你給它100％的身高，而那些100％與父母元素相關 – Johannes

我意識到它要填充其父母的100％，但我確信我已經做了類似的事情過去並能夠得到它來填充父母的*剩餘*高度而不必明確地計算它。我猜想，直到我弄清楚我使用了什麼（或者我錯了！）這是我將使用的方法，所以我會將其標記爲正確的。謝謝 – ministe2003

我沒有得到你的問題。這是你想要的？

Snapshot

，如果是，那麼這些都是在CSS的變化

main, section, article{ 
height: 100%; 
width: 100%; 
margin:5px; 
} 
textarea{ 
    height:120%; 
    width:1000%; 
    max-height:100%; 
    max-width:100%; 
} 


textarea.resize-none { 
resize: none; 
} 

main{ 
background: yellow; 
height:100%; 
} 

#left{ 
width: 100%; 
background: blue; 
height: 100% 
} 

#refresh{ 
margin-top: -30px; 
float:left; 
position :relative; 
}

來源

2017-08-21 15:55:15 swogat

基本上我問爲什麼這篇文章和其中的textarea重疊了它所在的部分？「左」元素的寬度是無關緊要的。你爲什麼要浮動按鈕？ – ministe2003

我編輯了答案。覈實。沒有理由將刷新浮動到正確的位置。爲了將每個標籤的大小限制爲父標籤的大小，請使用max-height和max-width。你可以看到我已經將文本區域的寬度設置爲1000px，但這不會影響我的輸出，因爲最大寬度定義爲100％ – swogat

雖然箱子尺寸設計包含元素溢出容器

回答

相關問題