Question

我在屏幕中央有一个主要的div，触摸板的形状。在其中我有另一个div，我想显示输出。但是，打击垫本身设置为％以对不同的分辨率作出反应。

见下图，黄色窗口是整个打击垫，红色窗口是内容屏幕。

现在我想制作那个红色窗口，就像pad的屏幕设置为％，这样它可以适应不同的分辨率，是否有一种简单的方法可以做到这一点？

enter image description here

黄色的css：

#mainWindow{
    margin-left:auto;
    margin-right:auto;
    background-image:url("../images/mainWindow.png");
    background-size:100% 100%;
    height:100%;
    width:80%;
    position: relative;
    border-style:solid;
    border-width:3px;
    border-color:yellow;
}

红色的没有任何东西。

我希望你能理解我。先谢谢。

修改

屏幕的html代码：

<div id='mainWindow'>

        <div id='screen'>



        </div>
</div>

Answer 1

为了使DIV的身高达到100％，你需要让父母的身高达到100％：

body, html {height:100%}

Answer 2

略有混淆的提示，但看看这是否适合你：

http://jsfiddle.net/T3MHZ/

HTML片段：

<html>
    <head></head>
    <body>
        <div id='mainWindow'>
            <div id='screen'></div>
        </div>
    </body> 
</html>

CSS样式：

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

#mainWindow{
    margin:0;
    height:100%;
    width:100%;
    /* SET THE PADDING TO THE PX MEASURE OF THE TABLET BORDER */
    padding:50px 40px 50px 40px; 
    /* box sizing will make sure that the usable content size is minus the padding value */
    box-sizing:border-box; 
    position: relative;
    border:1px solid black;
}

#screen{
    width:100%;
    height:100%;
    border:1px solid red;   
}

通过在#mainWindow上使用测量填充的组合来计算数位板边框，以及边框的框大小以确保#screen内容的精确匹配，这应该为您提供您正在寻找的灵活布局。

不要忘记您的视口元标记！ ;）

Answer 3

我不确定我是否理解你想要什么，但试试看身高：100％; 在红色。

Answer 4

min-height:100%;

你没有内容，它的内容是100％的内容。 Diodeus的答案也会有同样的原因，如果body，html是100％的窗口高度，那么内部的div将把它看作内容。

http://jsfiddle.net/calder12/Jq7xR/

<body>
<div class="container">
    <div class="outside">
        <div class="inside"></div>
    </div>
</div>
</body>

.container{height:250px;width:400px;}
.outside{border:1px solid red; min-height:100%; height:100%;}
.inside{border:1px solid green; min-height:82.5%; margin:5%}

说实话，即使我的大脑正在努力达到82.5％的高度，以使边缘正常工作= /但我相信这就是你所追求的。

在div窗口中心的Css div窗口

4 个答案: