Div寬度100%減去固定的像素數量 - Div width 100% minus fixed amount of pixels

問題:

How can I achieve the following structure without using tables or JavaScript? 如何在不使用表或JavaScript的情況下實現以下結構? The white borders represent edges of divs and aren't relevant to the question. 白色邊框代表div的邊緣,與問題無關。

結構1

The size of the area in the middle is going to vary, but it will have exact pixel values and the whole structure should scale according to those values. 中間區域的大小將會變化,但它將具有精確的像素值,整個結構應根據這些值進行縮放。 To simplify it, I'd need a way to set "100% - n px" width to the top-middle and bottom-middle divs. 爲了簡化它,我需要一種方法將“100% - n px”寬度設置爲頂部中間和底部中間div。

I'd appreciate a clean cross-browser solution, but in case it's not possible, CSS hacks will do. 我很欣賞一個乾淨的跨瀏覽器解決方案,但萬一不可能,CSS黑客會這樣做。

Here's a bonus. 這是獎金。 Another structure I've been struggling with and end up using tables or JavaScript. 我一直在努力的另一個結構,並最終使用表或JavaScript。 It's slightly different, but introduces new problems. 它略有不同,但引入了新的問題。 I've been mainly using it in jQuery-based windowing system, but I'd like to keep the layout out of the script and only control the size of one element (the middle one). 我一直主要在基於jQuery的窗口系統中使用它,但我想保持佈局不受腳本限制,只能控制一個元素(中間元素)的大小。

結構2


解決方案:

參考一: https://stackoom.com/question/2jR7
參考二: Div width 100% minus fixed amount of pixels
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章