水平拉伸 div

Question

我想实现这样的布局：

始终满足以下条件（与浏览器宽度无关）：

1. Div1 和 Div2 的高度相同 (50%)
2. Div 3 具有固定宽度 (50px)。
3. Div1 应填满整个剩余宽度。
4. Div4 具有固定的高度 (100px) 和宽度 (30px)，并且始终位于 Div3 的中心（水平

和垂直）

我不想使用基于 CSS3 flex 的显示，因为它在旧浏览器上不可用。我尝试使用display:inline-block，但这并没有根据需要拉伸 Div1。如何在不使用 javascript 的情况下实现此布局？非常感谢任何帮助。

Answer 1

这是我的解决方案（IE 支持是 IE >= 9）：

CSS：

html, body { 
    height: 100%;
}

.row {
    height: 50%;
    position: relative;
}

.half-height {
    height: 100%;
}

.red {
    background-color: red
}

.yellow {
    background-color: yellow;
    width: 50px;
    position: absolute;
    right: 0;
    top: 0;
}

.blue {
    height: 100px;
    width: 30px;
    background-color: blue;
    margin: 0px 10px; /* 50px - 30px = right & left margins */
}

.green {
    background-color: green
}

/* Use tables to vertically center the blue box */
.vertical-center {
    height: 100%;
    display: table;
}

.vertical-container {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

HTML：

<div class="row">
    <div class="red half-height"></div>
    <div class="yellow half-height">
        <div class="vertical-center">
            <div class="vertical-container">
                <div class="blue"></div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="green half-height"></div>
</div>

小提琴： http://jsfiddle.net/2jtu1rsn/1/

垂直居中技术取自这里：

https://css-tricks.com/centering-in-the-unknown/

Answer 2

CSS3 calc() 函数非常适合：

#div3 {
    float: left;
    width: 50px;
}

#div1 {
    float: left;
    width: calc(100% - 50px);
}

这是example on CodePen。

Answer 3

有绝对值但没有计算的位置。享受更新后的plunker。

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  height: 100%;
}

.div1, .div2, .div3, .div4 {
  position: absolute;
}

.div1, .div3 {
  top: 0;
  bottom: 50%;
}

.div1 {
  right: 50px;
  left: 0;
  background: red;
}

.div2 {
  top: 50%;
  right: 0;
  bottom: 0;
  left: 0;
  background: green;
}

.div3 {
  right: 0;
  width: 50px;
  background: yellow;
}

.div4 {
  top: 50%;
  right: 50%;
  margin: -50px -15px 0 0;
  width: 30px;
  height: 100px;
  background: blue;
}

Answer 4

您可以利用containing blocks 的强大功能实现您正在寻找的结构。具有position:relative position:absolute position:fixed 的元素将为任何position:absolute 子元素形成一个新的包含块。

您可以将div4 与display:inline-block、vertical-align:middle 和一个辅助元素居中。

请参阅下面代码中的 cmets，了解此示例中每个属性的用途。

此解决方案适用于所有主流浏览器except IE <= 7

(Demo)

#wrp {
    height: 100%;           /* All of the container's height */
    position: relative;     /* Establish a containing block */
}
#wrp > #top, 
#wrp > #bottom {
    position: absolute;     /* Absolutely relative to #wrp */
    height: 50%;            /* Half of #wrp's height */
    width: 100%;            /*  All of #wrp's width  */
}
#bottom {
    bottom: 0;              /* Move the bottom half to the bottom of #wrp */
}
#top > #left, 
#top > #right {
    position: absolute;     /* Absolutely relative to #top */
    height: 100%;           /* All of #top's height */
}
#left {
    left: 0;                /* Stick #left to the left of #top */
    right: 50px;            /* Expand #left to 50px from the right of #top */
}
#right {
    right: 0;               /* Stick #right to the right of #top */
    width: 100%;            /* Make #right's width responsive */
    max-width: 50px;        /* Limit #right's width to 50px */
    padding: 10px;          /* Horizontally center the child */
    box-sizing: border-box; /* Padding included in width */
    font-size: 0;           /* Remove white-space between elements */
}
#center-helper,
#inner {
    display: inline-block;  /* vertical-align applies to inline and inline-block
                               sizing applies to inline-block but not inline */
    vertical-align: middle; /* Align #inner to the center of the helper */
    height: 100%;           /* #center-helper will always be full height
                               #inner will be responsive, see next rule */
}
#inner {
    max-height: 100px;      /* Limit height to 100px */
    width: 100%;            /* Parent width = 50px + padding (10px*2) = 30px */
    font-size: 12pt;        /* Restore font size from the previous fix */
}

/* Colours and environment */
html,body{height:100%;margin:0}#bottom{background:#00b35e}#left{background:#ff000b}#right{background:#fff900}#inner{background:#00b1f5}

<div id="wrp">
    <div id="top">
        <div id="left">
        </div>
        <div id="right"> 
            <!-- IE6&7 inline-block only applies to inline elements -->
            <span id="center-helper"></span>
            <span id="inner"></span>         
        </div>
    </div>
    <div id="bottom">
    </div>
</div>

Answer 5

你可以这样做：

.container {
    width: 100%;
    height: 300px;
}
.div1 {
    background: red;
    height: 50%;
}
.div2 {
    background: green;
    height: 50%;
}
.div3 {
    background: yellow;
    height: 50%;
    width: 50px;
    float: right;
}

.div4{
    height: 100px;
    width: 30px;
    background: blue;
    margin: auto;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

<div class="container">
    <div class="div3">
        <div class="div4"></div>
    </div>
    <div class="div1"></div>
    <div class="div2"></div>
</div>