HTML

Question

我有一个 HTML 页面，分为页眉，主页和页脚部分。

下面我提到了 HTML 和 CSS 代码。

HTML code：

<!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*/

我要做的是设置内容＆＃39; div到页面的剩余宽度（页面总宽度减去右侧边栏的宽度）。有人可以帮助我。

Answer 1

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

100px是侧边栏的宽度

Answer 2

链接：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;
}

Answer 3

您可以将宽度设置为

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

如何将子div设置为自动宽度父级

3 个答案:

HTML

CSS