Question

我会问我如何设置css来设置元素的宽度以填充宽度窗口屏幕的其余部分而不使用度量单位（px，pt，et）。

例如我有两个div

<div id="div1"></div>
<div id="div2"></div>

一些css

#div1{
   width:200px;
   height: 40px;
   float: left;
   border: 1px solid black;
}
#div2{
  width: // here what i should set to get rest of window screen until 100%,
         // depending on resolution. When i try set param auto this param 
         // work that resize my div when i put something into, but i except 
         // at start already set rest of window width. It is possible to set 
         // this value without using javascript only in CSS??
  height: 40px;
  float: left;
  border: 1px solid black;
}

Answer 1

您还可以将表格布局与display: table和display: table-cell一起使用，但是对于这种方法，您需要一个包装器。 See Fiddle

Answer 2

你没有做太多的事情来做你想要的。我为你做了一个小小的傻瓜。 HTML：

<div id="div1">1</div>
<div id="div2">2</div>

CSS＃：

#div1{
    height: 40px;
    width: 100px;
    float: left;
    background: blue;
}
#div2{
    height: 40px;
    background: red;
    width: 100%;
}

Fiddle

Answer 3

我遇到了同样的问题。我进行如下：

body {
 width: 100% ;
 margin:0px;
 padding:0px;
}

#div1{
 position:relative;
 width:200px;
 height: 40px;
 float: left;
 border: 1px solid black;
}

#div2{
 position:relative;
 width:calc(100% - 200px);
 height: 40px;
 float: left;
 border: 1px solid black;
}

Answer 4

您也可以使用flexbox来实现目标 HTML：

<div class="wrapper background">
  <img src="images/ant.png" class=logo>
  <div class=leftbox>
    <h1>Ant Arni</h1>
  </div>
  <div class=rightbox>
    <table>
      <tr>
        <td><a href=#>Link 1</a></td>
        <td><a href=#>Link 4</a></td>
      </tr>
      <tr>
        <td><a href=#>Link 2</a></td>
        <td><a href=#>Link 5</a></td>
      </tr>
      <tr>
        <td><a href=#>Link 3</a></td>
        <td><a href=#>Link 6</a></td>
      </tr>
    </table>
  </div>
</div>

和CSS：

.wrapper {
    display: flex;
}
.leftbox {
    background: red;
    width: 200px;
}
.rightbox {
    background: yellow;
    flex: 1;
}

fiddle

“flex：1”表示您正在更改项目的flex-grow属性。你可以阅读它here。

Answer 5

使用display：inline-block;在#div2上

Answer 6

试试这个。

#div1{
   width:200px;
   height: 40px;
   float: left;
   border: 1px solid black;
}
#div2{
    clear:left;
  height: 40px;
  border: 1px solid black;
}

Demo Fiddle

如何生成宽度html元素来填充宽度窗口的其余部分

6 个答案: