side bar with a no previsible width in CSS/HTML

问题

Is there a way to achieve the following behavior in css/html :

Please note the green side bar has not to be responsive but I cannot give it a fixed width with

width: XX px;

because it can contain more or less elements, so no idea of XX in advance.

The brown bar has to be responsive and takes all the remaining width.

Thanks in advance for any trick! I have tried tables but with no success as we can't specify a div to restrict its with to what is necessary.

回答1:

You can achieve that easily with flexbox. Here's the example: http://codepen.io/anon/pen/JKXXNE

#container {
  display:flex;
}
#sidebar, #content {
  height: 100px;
}
#sidebar {
  background-color: green; 
}
#content {
  background-color: brown;
  flex: 1;
}

回答2:

You can use Flexbox, and if you set flex: 1 on right div it will take rest of free space and width of left div will still be dynamic.

.parent {
  display: flex;
  border: 2px solid black;
}
.left {
  background: #22B14C;
  padding: 10px;
}
.right {
  background: #EFE4B0;
  padding: 10px;
  flex: 1;
}
span {
  margin: 0 20px;
}

<div class="parent">
  <div class="left"><span>Span</span><span>Span</span></div>
  <div class="right">Right</div>
</div>

This can also be done with CSS Table layout you just need to set width: 100% on .right div and it will take rest of free space

.parent {
  display: table;
  border: 2px solid black;
}
.left {
  background: #22B14C;
  display: table-cell;
  padding: 10px;
}
.right {
  background: #EFE4B0;
  display: table-cell;
  width: 100%;
  padding: 10px;
}
span {
  margin: 0 20px;
}

<div class="parent">
  <div class="left"><span>Span</span><span>Span</span></div>
  <div class="right">Right</div>
</div>

回答3:

For older browsers, use display: table

html, body{
  height: 100%;
  margin: 0;
}
.tbl{
  display:table;
}
.row{
  display:table-row;
}
.cell{
  display:table-cell;
}
.content{
  width: 100%;
}
#left_col {
  background: orange none repeat scroll 0 0;
  width: 1%;
}
#right_col {
  background: green none repeat scroll 0 0;
  width: 100%;
}

<div class="tbl content">
  <div class="row">
    <div id="left_col" class="cell">
      wide&nbsp;content&nbsp;<br>
      content&nbsp;<br>
      wider&nbsp;contentcontent&nbsp;<br>
    </div>
    <div id="right_col" class="cell"></div>
  </div>
</div>

回答4:

Another way to achieve this without using flexbox can be:

Working Fiddle:

https://jsfiddle.net/y00e5w6m/ (Note i have used sample css and input just to showcase how this can be done. This should be tuned a bit according to requirements)

Sample Output:

Html:

<div style="float:left;width:100%;border:1px solid #000;">
<div id="dynamic-content" style="float:left;background-color:#090;border:1px solid #900">
<div style="float;left;">
Mango
</div>
<div style="float;left;margin-left:5px;">
Banana
</div>
<div style="float;left;margin-left:5px">
Orange
</div>
</div>
<div id="other-content" style="float:left;background-color:#630;border:1px solid #009;">
</div>
</div>

JS:

var items=["mango","grapes","banana"];
var windowWidth = $(window).width();
console.log(windowWidth);
var dynamicContentWidth = $("#dynamic-content").width();
console.log(dynamicContentWidth);
var otherContentWidth = dynamicContentWidth >= windowWidth ? windowWidth : windowWidth-dynamicContentWidth-20;

console.log(otherContentWidth);

$("#other-content").width(otherContentWidth);
$("#other-content").height($("#dynamic-content").height());

来源：https://stackoverflow.com/questions/37777631/side-bar-with-a-no-previsible-width-in-css-html

标签

html

css

html-table

responsive