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

我会问我如何设置CSS来设置元素的宽度来填充其余宽度窗口屏幕而不使用度量单位（px，pt等）。如何生成宽度HTML元素来填充其余的宽度窗口

例如我有两个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; 
}

来源

2014-02-17 ZiupeX

您也可以使用表格布局display: table和display: table-cell，但这种方法需要的包装。 See Fiddle

来源

2014-02-17 10:42:57

这里才是最好的解决方案。 – ZiupeX

-1

使用显示：内联块; ＃div2

来源

2014-02-17 10:35:50 Saty

你不需要做太多的事情来制作你想要的东西。我做了一个js小提琴给你看。 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

来源

2014-02-17 10:37:33

试着在＃div2里面有很多文字，看看发生了什么。＃div1只是浮动的，所以＃div2中的文本将在＃div1下。 –

-1

试试这个。

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

Demo Fiddle

来源

2014-02-17 10:38:35

只有当你删除'''clear：left''' –

我经历了同样的问题。我继续如下：

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; 
}

来源

2016-10-19 11:48:07 merrais

您也可以使用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

“柔性：1” 手段，你改变了项目的柔性成长属性。你可以阅读关于它here。

来源

2017-11-14 12:57:35

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

回答

相关问题