Question

我创建了一个两列布局。 Here is the jsfiddle.net。我的问题是我希望中心线的宽度为10px，高度为100％。我创建了一个标识为div（#obal）的容器height: auto。如果我将#cara .inner的高度设置为100%，则中心线会消失。我有什么改变？

感谢您的回复。

Answer 1

这里的问题似乎是当你设置#cara时。内部高度为100％它需要它的父容器的全高 - #cara在这种情况下是0px;

解决方案可能如下所示：

＆＃13;

#obal {
	margin: 10px;
	height: 200px;
}	
#obal #cara {
    position: relative;
    float: left;
    left: -20px;
    height: 100%;
}	
#cara .inner {
    position: absolute;
	height: 100%;
	width: 10px;
    float: left;
	background: #336;
}
div#prvni {
	float: left;
	margin: 0px 30px;
	width: 120px;
	height: 100px;
	background: #ff3322;
	font-size: 0.95rem;
	overflow: hidden;
}		
div#prvni .inner,  div#druhy .inner{		
    padding: 10px;
}
div#druhy {
	width: 120px;
	height: auto;
	background: #393;
	font-size: 1rem;
	overflow: hidden;
    float: left;
}

＆＃13;

<div id="obal">
    <div id="prvni">
	    <div class="inner">Prvni cast text neni sice nejsilnejsi, ale spisovatel se snazi popsat dulezite body jeho navstevy
        </div>
	</div>
	<div id="cara">
	    <div class="inner"></div>
	</div>
	<div id="druhy">
	    <div class="inner">Druha cast mluvila hlavne o velkych problemech na startu, kdy se vsichni ucastnici nestihnuli pripravit a pote nasledovat zmatek. Jenze kazdy chtel vyhrat, tak to nevzdal <br> NIKDY :-)
         </div>
	</div>
</div>

＆＃13;

希望这有帮助。

Answer 2

http://jsfiddle.net/oapu11q4/20/

===================== CSS ===================

#obal {
        display: table;
        height: auto;
        margin: 10px;
    }
    div#prvni {
        background: none repeat scroll 0 0 #ff3322;
        display: table-cell;
        font-size: 0.95rem;
        height: 100%;
        width: 120px;
    }   

    #obal #cara {
        background: none repeat scroll 0 0 #336;
        display: table-cell;
    }
    #cara .inner {
        width: 10px;
    }
    div#druhy {
        background: none repeat scroll 0 0 #393;
        display: table-cell;
        font-size: 1rem;
        height: 100%;
        width: 120px;
    }
    div#prvni .inner, div#druhy .inner {
        padding: 10px;
    }

===================== HTML ========================= ====

<div id="obal">
    <div id="prvni">
        <div class="inner">Prvni cast text neni sice nejsilnejsi, ale spisovatel se snazi popsat dulezite body jeho navstevy
        </div>
    </div>
    <div id="cara">
        <div class="inner"></div>
    </div>
    <div id="druhy">
        <div class="inner">Druha cast mluvila hlavne o velkych problemech na startu, kdy se vsichni ucastnici nestihnuli pripravit a pote nasledovat zmatek. Jenze kazdy chtel vyhrat, tak to nevzdal <br> NIKDY :-)
         </div>
    </div>
</div>

Answer 3

您可以将高度设置为100vh

Answer 4

试试这个：

http://jsfiddle.net/Ls6sqz2n/

您需要将height: 100%;添加到元素祖先，包括html和body：

html, body {
    height: 100%;
}

#obal {
    margin: 10px;
    height: 200px;
    height: 100%;
}

#cara {
    position: relative;
    width: 10px;
    height: 100%;
    float: left;
}   
#cara .inner {
    position: absolute;
    right: 15px;
    height: 100%;
    width: 10px;
    background: #336;
}

（...）

Answer 5

对于#cara相对高度

Using #obal as a reference：

#obal {
    margin: 10px;
    position: relative; overflow: hidden; 
}

#cara {
    float: left;
    margin-left: -20px;
}   
#cara .inner {
    position: absolute;
    width: 10px; height: 100%;
    background: #336;
}

（...）

来自specification：

百分比的计算方法是相对于生成的包含块的高度。 如果未明确指定包含块的高度（即，它取决于内容高度），并且这个元素不是绝对的定位后，该值将计算为“自动 。

Using an overflow: hidden to cut高度很大的一行：

#obal {
    margin: 10px;
    overflow: hidden;
}

#cara {
    float: left;
    position: relative; right: 20px;
}   
#cara .inner {
    position: absolute; top: 0; left: 0;
    width: 10px; height: 10000px;
    background: #336;
}

（...）

使用flex：

#obal {
    margin: 10px;
    display: flex;
}

#prvni, #druhy {
    display: table;
}

Div的高度：100％不起作用

5 个答案: