父級div高度由子級div撐開; 裡層div的高度始終與外層div的高度一樣
阿新 • • 發佈：2018-11-22
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* 1.父級div的高度由內部的div內容撐開: 解決方案: 父級div的高度設定為auto,且設定overflow屬性;當外層div設定固定的高度時,div內多餘的內容的處理方案根據overflow來進行;若沒有設定固定高度,則高度會被內層div撐開 2.裡層div的高度始終與外層div的高度一樣 解決方案: 利用絕對定位;top的值為0,bottom的值也為0 即可讓裡層div的高度與外層的高度一樣 */ .layout{ margin: 0 auto; border: 1px solid red; min-width: 200px; height: auto; width: 500px; overflow: auto; position: relative; } .left{ float: left; width: 50px; min-height: 50px; border-right: 1px solid greenyellow; } .right{ position: absolute; right: 0; top: 0; bottom: 0; width: 50px; border-left: 1px solid green; } </style> </head> <body> <button onclick="addHeigth()">點選一下</button> <div class="layout"> <div class="left" id="left"></div> <div class="right"></div> </div> <script> function addHeigth () { var node = document.getElementById('left') // clientHeight 為瀏覽器計算出來的屬性(只讀) node.style.height = node.clientHeight + 200 +'px' } </script> </body> </html>