Fatal编程技术网
  • html/
  • Html 如何使div填充剩余的水平空间？

Html 如何使div填充剩余的水平空间？

html css

Html 如何使div填充剩余的水平空间？,html,css,width,responsive,Html,Css,Width,Responsive,我有两个div:一个在页面的左侧，一个在页面的右侧。左边的那个有固定的宽度，我想要右边的那个来填充剩余的空间 #搜索{ 宽度：160px； 高度：25px； 浮动：左； 背景色：#ffffff； } #航行{ 宽度：780px； 浮动：左； 背景色：#A53030； } 文本 导航这似乎完成了您的目标 #左{ 浮动：左； 宽度：180px； 背景色：#ff0000； } #对{ 宽度：100%； 背景色：#00FF00； } 左边 正确的 解决方案来自display属性 基本上，您需要使这

我有两个div:一个在页面的左侧，一个在页面的右侧。左边的那个有固定的宽度，我想要右边的那个来填充剩余的空间

#搜索{
宽度：160px；
高度：25px；
浮动：左；
背景色：#ffffff；
}
#航行{
宽度：780px；
浮动：左；
背景色：#A53030；
}
文本

导航
这似乎完成了您的目标

#左{
浮动：左；
宽度：180px；
背景色：#ff0000；
}
#对{
宽度：100%；
背景色：#00FF00；
}

左边
正确的
解决方案来自display属性

基本上，您需要使这两个div像表格单元格一样工作。因此，与使用
float:left
不同，您必须在两个div上使用
display:table cell
，对于动态宽度div，您需要设置
width:auto也是。这两个div都应该放在一个100%宽度的容器中，并带有
display:table
属性

以下是css：


.container{显示：表格；宽度：100%}
#搜寻{
宽度：160px；
高度：25px；
显示：表格单元格；
背景色：#FFF；
}
#航行{
宽度：自动；
显示：表格单元格；
/*背景色：url（'../images/transparent.png'）*/
背景色：#A53030；
}
*html#导航{float:left；}


以及HTML：


<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>






重要提示：对于Internet Explorer，您需要在动态宽度div上指定float属性，否则空间将不会被填充

我希望这能解决你的问题。

如果您愿意，您可以阅读我在上写的关于这一点的完整文章。
我发现Boushley的答案存在的问题是，如果右栏比左栏长，它只会环绕左栏，然后继续填充整个空间。这不是我想要的行为。在搜索了很多“解决方案”后，我发现了一个关于创建三栏页面的教程（现在链接已失效）

作者提供了三种不同的方式，一种是固定宽度，一种是三个可变列，另一种是固定外列和可变中间宽度。比我发现的其他例子更优雅、更有效。显著提高了我对CSS布局的理解

基本上，在上面的简单例子中，将第一列向左浮动，并给它一个固定的宽度。然后给右边的列留一个比第一列宽一点的左边距。就这样。完成。Ala Boushley的代码：

下面是堆栈片段中的演示&



#左{
浮动：左；
宽度：180px；
}
#对{
左边距：180像素；
}
/*仅以突出显示div为例*/
#左{背景色：粉红色；}
#右{背景色：浅绿色；}


左

对
Boushley的答案似乎是使用浮动来安排这一过程的最佳方式。然而，它并非没有问题。扩展元素中的嵌套浮动将不可用；它将打破这一页

当涉及到扩展元素时，显示的方法基本上是“伪造的”——它实际上不是浮动的，它只是使用其边距与固定宽度的浮动元素一起玩

问题就在于：扩展元素不是浮动的。如果您尝试在展开元素中嵌套任何浮动项，那么这些“嵌套”浮动项实际上根本不是嵌套的；当您尝试粘贴
时，清除：两个在“嵌套”浮动项下，最终也会清除顶级浮动项

然后，为了使用Boushley的解决方案，我想补充一点，您应该放置一个div，如下所示：
.假货
{
身高：100%；
宽度：100%；
浮动：左；
}
并将其直接放在扩展的div中；所有扩展div的内容都应该放在这个fakeFloat元素中


出于这个原因，我建议在这种特定情况下使用表。浮动元素实际上并不是为了实现您想要的扩展而设计的，而使用表的解决方案是微不足道的。通常有人认为浮动更适合布局，而不是表格。。但无论如何，你都没有在这里使用浮动，你是在假装——以我的拙见，这有点违背了这个特定案例的风格论证的目的。
我在尝试布局一些控件时遇到了同样的问题。虽然现在的普遍理念是“使用
DIV
而不是
TABLE
”，但我发现在我的案例中，使用TABLE工作得更好。特别是，如果您需要在两个元素内进行直接对齐（例如，垂直居中、水平居中等），表中提供的选项提供了简单直观的控制

以下是我的解决方案：


<html>
<head>
  <title>Sample solution for fixed left, variable right layout</title>
  <style type="text/css">
    #controls {
      width: 100%;
    }
    #RightSide {
      background-color:green;
    }
  </style>
</head>

<body>
<div id="controls">
  <table border="0" cellspacing="2" cellpadding="0">
    <TR>
      <TD>
        <button>
FixedWidth
        </button>
      </TD>
      <TD width="99%" ALIGN="CENTER">
        <div id="RightSide">Right</div>
      </TD>
    </TR>
  </table>
</div>
</body>
</html>




固定左、可变右布局的示例解决方案
#控制{
宽度：100%；
}
#右侧{
背景颜色：绿色；
}
固定宽度
赖特

@Boushley的答案是最接近的，但是有一个问题没有被指出。右div占据浏览器的整个宽度；内容采用预期的宽度。要更好地了解此问题，请执行以下操作：


<html>
<head>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    body {
        height: 100%;
    }
    #left {
        opacity: 0;
        height: inherit;
        float: left;
        width: 180px;
        background: green;
    }
    #right {
        height: inherit;
        background: orange;
    }
    table {
            width: 100%;
            background: red;
    }
    </style>
</head>
<body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <table><tr><td>Hello, World!</td></tr></table>
    </div>
</body>
</html>




*{边距：0；填充：0；}
身体{
身高：100%；
}
#左{
不透明度：0；
身高：继承；
浮动：左；
宽度：180px；
背景：绿色；
}
#对{
身高：继承；
背景：橙色；
}
桌子{
宽度：100%；
背景：红色；
}
左

你好，世界！




内容位置正确（在Firefox中），但是宽度不正确。当子元素开始继承宽度时（例如，宽度为1的表

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>



#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}



<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>



.center{
    background:#ddd;
    width: 500px;
    float:left;
}

.left{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}

.right{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}



<div>
<div id="left">
    left
</div>
<div id="right">
    right
</div>



#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}



.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}



<div class=top>top </div>
<div>
    <div class="left">left </div>
    <div class="right">
        <div class="content">right </div>
    </div>
</div>



#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}



   #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #FFF;
    }

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }



<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

<body>
    <div>
        <div id="left">
            left
        </div>
        <div id="right">


right
    </div>
</div>



<header>
  <div id="left"><input type="text"></div>
  <div id="right">Menu1 Menu2 Menu3</div>
</header>



header { position: relative;  }
#left {
    width: 160px;
    height: 25px;
}
#right {
    position: absolute;
    top: 0px;
    left: 160px;
    right: 0px;
    height: 25px;
}



.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}



<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>



Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}



Item X=50%
Item Y=10%
Item z=20%



div[class="item"] {
...
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
...



<div class="cont">
  <div class="search">
    Big Logo Text
  </div>
  <nav>
    <ul class="navbar">
      <li><a href="#1">NavLink1</a></li>
      <li><a href="#2">NavLink2</a></li>
      <li><a href="#3">NavLink3</a></li>
      <li><a href="#4">NavLink4</a></li>
      <li><a href="#5">NavLink5</a></li>
    </ul>
  </nav>
</div>

.cont{
  display: inline-grid;
  grid-template-columns: 160px 10px calc(100% - 170px);
  grid-template-rows: auto;
  grid-template-areas: "search .  navigation";
  width: 100%;
  height: auto;
  text-align: center;
}

.search {
  grid-area: search;
  height: 90px;
  background-color: #00FF00;
  line-height: 80px;
  font-size: 1.4rem;
  font-weight: 600;
}
nav {
  grid-area: navigation;
  height: 90px;
  background-color: #A53030;
}

.navbar{
  display: flex;
  height: 30px;
  width: 100%;
  padding: 0%;
  list-style-type: none;
  flex-flow: row wrap;
  flex: 0 1 auto;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
}

.navbar a{
    outline: 0;
    text-decoration: none;
}



<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>