[英]how to set child div to auto width parent
我有一個分為頁眉，主要和頁腳部分的HTML頁面。
下面我提到了HTML和CSS代碼。
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/ico" href="/static/images/favicon.ico">
<link rel="stylesheet" type="text/css" href="/static/css/eGirvi.css">
<title>eGirvi ERP for jewellers</title>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo">
<img src="/media/logo.png">
</div>
</div>
<div id="main">
<div id="content">content</div>
<div id="right-sidebar">right-sidebar</div>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
CSS代碼：
/*Header div start here*/
#header{
border: 1px dotted;
height: 100px;
}
/*Header div end here*/
/*Logo start here*/
#logo{
width: 100px;
height: 100px;
}
/*Logo start here*/
/*Main start here*/
#main{
min-height: 800px;
border: 2px solid;
}
/*main end here*/
/*content start here*/
#content{
min-height: 800px;
border: 2px dashed;
float: left;
}
/*content end here*/
/*right-sidebar start here*/
#right-sidebar{
min-height: 800px;
width: 100px;
border: 2px solid;
float: right;
}
/*right-sidebar end here*/
/*footer start here*/
#footer{
clear: both;
border: 1px dotted;
height: 100px;
}
/*footer end here*/
我想做的是將'content'div設置為頁面的剩余寬度，即（總頁面寬度減去右側欄的寬度） 。 有人可以幫幫我嗎。
#content{ width: calc (100% - 100px);}
100px是邊欄的寬度
<div class="parent">
<div class="child">...</div>
<div class="child">...</div>
<div class="child">...</div>
</div>
.parent
{
display: table-row;
width: 900px;
}
.child
{
display: table-cell;
}
您可以將寬度設置為
width: -moz-calc(100% - 40px); /* Firefox */
width: -webkit-calc(100% - 40px); /* Chrome, Safari */
width: calc(100% - 40px); /* IE9+ and future browsers */
當父div更改寬度時，如何為固定的子div設置自動寬度？
[英]How to set auto width for the fixed child div, when parent div change width?
如何獲取超級父div寬度並基於超級父div寬度設置子和父div寬度
[英]How to get super parent div width and set child and parent div widths based on super parent div width
CSS：將子div寬度自動設置為內容，而不是完整的父寬度
[英]CSS: Make child div width auto to content in it, not the full parent width
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.