如何让一个div填充剩余的水平空间?

我有2个div:一个在左边，一个在右边。左边的宽度是固定的，我想用右边的填充剩余的空间。

#搜索{ 宽度:160 px; 高度:25 px; 浮:左; background - color: # ffffff; ｝ #{导航宽度:780 px; 浮:左; background - color: # A53030; ｝ < div id = "搜索" > < / div >文本 < div id = "导航" > < / div >导航

当前回答

我想知道为什么没有人把position: absolute和position: relative放在一起使用

所以，另一个解决方案是:

HTML

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

CSS

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

Jsfiddle例子

2016-02-16 08:13:48

其他回答

使用显示:flex

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

2016-12-21 13:45:04

如果您试图填充flexbox中2项之间的剩余空间，请将以下类添加到您想要分离的2项之间的空div:

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

2016-11-17 16:32:31

我在尝试布局一些jqueryUI控件时遇到了同样的问题。尽管现在普遍的理念是“使用DIV而不是TABLE”，但我发现在我的案例中使用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>

2012-04-04 22:21:41

我想知道为什么没有人把position: absolute和position: relative放在一起使用

所以，另一个解决方案是:

HTML

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

CSS

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

Jsfiddle例子

2016-02-16 08:13:48

我已经在这个问题上工作了两天，有一个解决方案，可能适用于你和任何人试图使一个响应固定宽度左侧，并有右侧填补屏幕的其余部分，而不环绕左侧。我认为这样做的目的是使页面在浏览器和移动设备上都能响应。

这里是密码

// Fix the width of the right side to cover the screen when resized $thePageRefreshed = true; // The delay time below is needed to insure that the resize happens after the window resize event fires // In addition the show() helps. Without this delay the right div may go off screen when browser is refreshed setTimeout(function(){ fixRightSideWidth(); $('.right_content_container').show(600); }, 50); // Capture the window resize event (only fires when you resize the browser). $( window ).resize(function() { fixRightSideWidth(); }); function fixRightSideWidth(){ $blockWrap = 300; // Point at which you allow the right div to drop below the top div $normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){ $('.right_content_container').width( $normalRightResize ); $('.right_content_container').css("padding-left","0px"); /* Begin test lines these can be deleted */ $rightrightPosition = $('.right_content_container').css("right"); $rightleftPosition = $('.right_content_container').css("left"); $rightwidthPosition = $('.right_content_container').css("width"); $(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition); /* End test lines these can be deleted */ } else{ if( $('.right_content_container').width() > 300 ){ $('.right_content_container').width(300); } /* Begin test lines these can be deleted */ $rightrightPosition = $('.right_content_container').css("right"); $rightleftPosition = $('.right_content_container').css("left"); $rightwidthPosition = $('.right_content_container').css("width"); $(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition); /* End test lines these can be deleted */ } if( $thePageRefreshed == true ){ $thePageRefreshed = false; } } /* NOTE: The html and body settings are needed for full functionality and they are ignored by jsfiddle so create this exapmle on your web site */ html { min-width: 310px; background: #333; min-height:100vh; } body{ background: #333; background-color: #333; color: white; min-height:100vh; } .top_title{ background-color: blue; text-align: center; } .bottom_content{ border: 0px; height: 100%; } .left_right_container * { position: relative; margin: 0px; padding: 0px; background: #333 !important; background-color: #333 !important; display:inline-block; text-shadow: none; text-transform: none; letter-spacing: normal; font-size: 14px; font-weight: 400; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; border-radius: 0; box-sizing: content-box; transition: none; } .left_navigator_item{ display:inline-block; margin-right: 5px; margin-bottom: 0px !important; width: 100%; min-height: 20px !important; text-align:center !important; margin: 0px; padding-top: 3px; padding-bottom: 3px; vertical-align: top; } .left_navigator_items { float: left; width: 150px; } .right_content_container{ float: right; overflow: visible!important; width:95%; /* width don't matter jqoery overwrites on refresh */ display:none; right:0px; } .span_text{ background: #eee !important; background-color: #eee !important; color: black !important; padding: 5px; margin: 0px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="top_title">Test Title</div> <div class="bottom_content"> <div class="left_right_container"> <div class="left_navigator_items"> <div class="left_navigator_item">Dashboard</div> <div class="left_navigator_item">Calendar</div> <div class="left_navigator_item">Calendar Validator</div> <div class="left_navigator_item">Bulletin Board Slide Editor</div> <div class="left_navigator_item">Bulletin Board Slide Show (Live)</div> <div class="left_navigator_item">TV Guide</div> </div> <div class="right_content_container"> <div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi. Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut. Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor. Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus. In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div> </div> </div> </div>

这是我的小提琴，它可能对你有用，就像对我一样。 https://jsfiddle.net/Larry_Robertson/62LLjapm/

2018-01-10 03:44:12

如何让一个div填充剩余的水平空间?

推荐文章

最新文章

标签