我如何使一个div包含在一个flex div内

我正在尝试制作一个基于百分比的div - 并试图在div中包含一个div。我希望中心（xyz div）只有它从content-div获得的大小的90％（高度）。我如何使一个div包含在一个flex div内

我希望“content”div能够响应90％中心div高度（页眉和页脚之间）。现在 - 基于浏览器大小完成拍摄。

CSS

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

.box { 
    display: flex; 
    flex-flow: column; 
    height: 100%; 
    font-size: 4em; 

} 

.box .row { 
    border: 1px dotted grey; 
    flex: 0 1 30px; 
} 

.box .row.header { 
    flex: 0 1 auto; 
} 

.box .row.content { 
    flex: 1 1 auto; 
} 

.box .row.footer { 
    flex: 0 1 40px; 
} 


.xyz { 
    position: absolute; 
    margin: 10 10 10 10 ; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    width: 70%; 
    height: 90%; 
    overflow: auto; 
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); 
}

HTML

<div class="box"> 
    <div class="row header"> 
    <p><b>header</b> 
    </div> 
    <div class="row content"> 
    <div class="xyz"> 
    <p> 
     <b>content</b> (fills remaining space) 
    </p> 
    </div> 
    </div> 
    <div class="row footer"> 
    <p><b>footer</b> (fixed height)</p> 
    </div> 
</div>

来源

2015-11-06 hypermails

你可以发布你想要的最终结果的图像吗？ –

需要图片 - http://imgur.com/J5rzMnb。我希望“内容”div能够响应中心div的90％高度（页眉和页脚之间） – hypermails

删除位置属性，并执行以下更改为XYZ类

margin: 10px auto 10px auto; 
width: 90%;

来源

2015-11-06 19:47:56 Mazhar

，这对我不起作用。我需要xyz div为高度90％/内容宽度div – hypermails

然后，请不要提及此div的高度，上下保证金应为5％。检查它是否有效。否则，我会向你发送代码。 :) 保证金：5％汽车5％汽车; – Mazhar

.xyz { 
width: 70%; 
box-shadow: 0 0 30px; 
text-align:center; 
-webkit-flex: 18 0 0; 
flex: 18 0 0; 
}

入住这再次交配。这样，如果你喜欢，你可以有页眉和页脚固定高度。 Html被改变了，问一个改变是否不清楚，现在它确实是你想要的，边界只是为了展示的目的。字体大小设置为非常小，因为溢出。让我知道这是否是理想的解决方案。

http://codepen.io/damianocel/pen/XmxmQE

来源

2015-11-06 22:50:55

谢谢你的尝试。你正在使用硬编码大小 - 我只想使用％。是一个选项 – hypermails

啊好吧，是的，这是可能的，我只需要一个稍微不同的布局，xyz不能嵌套在内容div。我以为你会大致知道身高。我现在会做这个并且发布它。 –

@hypermails 现在看看，没有高度宣布了。:-) –

如果你想使用position: absolute;你需要你希望它是靠住元素位置。

在你的情况下，将.content{position: relative;}添加到你的CSS。

Updated fiddle更小的字体大小。

来源

2015-11-07 02:37:12 woestijnrog

我如何使一个div包含在一个flex div内

回答

相关问题