1

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

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

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

在此处输入图像描述

黄色的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>
4

4 回答 4

3

为了使 DIV 具有 100% 的高度，您还需要使其父级的高度为 100%：

body, html {height:100%}
于 2012-10-16T19:56:15.113 回答
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 内容的精确匹配，这应该为您提供您正在寻找的灵活布局。

不要忘记您的视口元标记！;) ​</p>

于 2012-10-16T20:25:20.790 回答
1

我不确定我是否正确理解了您想要的内容，但请尝试 height: 100%; 在红色。

于 2012-10-16T19:54:38.763 回答
1 
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% 的高度作斗争以使边距正常工作 =/ 但我相信这就是你所追求的。

于 2012-10-16T19:59:14.293 回答