我有一個HTML頁面，它分爲頁眉，主頁和頁腳部分。如何將子div設置爲自動寬度父

下面我提到了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*/

什麼，我試圖做的是設置「內容」股利是（總頁面寬度的頁面的剩餘寬度減去右側欄的寬度）。有人可以幫幫我嗎。

來源

2014-09-13 vaibhav jain

鏈接：CSS Auto Width Child 'div's in Parent 'div'

HTML

<div class="parent"> 
    <div class="child">...</div> 
    <div class="child">...</div> 
    <div class="child">...</div> 
</div>

CSS

.parent 
{ 
    display: table-row; 
    width: 900px; 
}  
.child 
{ 
    display: table-cell; 
}

來源

2014-09-13 06:39:37

#content{ width: calc (100% - 100px);}

100px的是側邊欄的寬度

來源

2014-09-13 06:34:11 himanshu

它不適用於鉻合金。請看看上面給出的@ Sam1604解決方案。 – 2014-09-13 07:14:53

好吧，我給我答案後，我在鉻測試它，但如果@ Sam1604解決方案適合你，我沒有問題 – himanshu 2014-09-13 07:17:14

您可以設置寬度一樣

width: -moz-calc(100% - 40px); /* Firefox */ 
width: -webkit-calc(100% - 40px); /* Chrome, Safari */ 
width: calc(100% - 40px); /* IE9+ and future browsers */

來源

2014-09-13 06:55:16 Sam1604

你的解決方案正在工作，但現在內容div推動右側的底部。 – 2014-09-13 07:13:39

我認爲這是因爲borbur發生，所以-48px將工作 – himanshu 2014-09-13 07:19:40

如何將子div設置爲自動寬度父

回答

HTML

CSS

相關問題