我有一个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

相关问题