如何设置内部div宽度和高度到外部div和窗口中心的响应？ [英] How to set inner div width and height to outer div and also center of window with responsive?
本文介绍了如何设置内部div宽度和高度到外部div和窗口中心的响应？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<div name="outer" style='background-color:red; '>
<div name="inner"style='background-color:yellow; '>
some content<br>
some content<br>
some content<br>
some content<br>
some content<br>
</div>
</div>
注意：内部div没有设置宽度和高度静态。内部div内容从数据库动态绑定，因此在数据库管理设置宽度和高度。这个宽度和高度固定到外部div。并且div必须在窗口中心显示并且响应
谢谢
Note: inner div not set width and height static. inner div content bind dynamically from database so in database admin set width and height.this width and height fix to outer div. and also div must be show on center of window with responsive
thanks
推荐答案
如果你想要那个内部div覆盖外部div的整个宽度和高度，将内部div的宽度和高度设置为100％，如下所示
If you want that inner div covers the whole width and height of your outer div, set width and height of your inner div to 100% like this
<div style="width:100%; height:100%"></div>
试试这个：
Try this:
<!DOCTYPE html>
<html>
<head>
<style>
#inner {
background-color: yellow;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div name="outer" id="outer">
<div name="inner" id="inner" style="width:250px; height:350px">
put your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents
put your contents here
</div>
</div>
</body>
</html>
至于添加响应性，请阅读我的文章le 从冷漠到响应式网页设计 [ ^ ]
如果我得到你要求的东西，你想要外部div填满整个窗口，内部div位于外部div的中心。
你可以试试像这个（在Chrome中测试）：
If I get what you are asking and you want the outer div to fill up the whole window and the inner div to be in the center of the outer div.
You could try something like this (Testing in Chrome):
/*css*/
html, body {
height:100%
}
.outer {
background-color: red;
height:100%;
}
.inner {
background-color: yellow;
position:relative;
top:50%;
width:50%;
transform:translateY(-50%);
margin: auto auto auto auto;
}
<!--html-->
<div name="outer" class="outer">
<div name="inner" class="inner">put your contents here ...</div>
</div>
您可以删除背景颜色，它们仅用于显示。
这是小提琴： http://jsfiddle.net/yPMVJ/71/ [ ^ ]
以下是垂直对齐技术的链接： http://zerosixthree.se/vertical-align-anything-with-只需3行-css / [ ^ ]
这篇关于如何设置内部div宽度和高度到外部div和窗口中心的响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
