1

I have a main div at the center of the screen at the shape of the touch pad. Within it I have another div in which I want to display output. However, the pad itself is set on % to react on different resolutions.

See the pic below, yellow window is the whole pad and the red window is the content screen.

Now I want to make that red window exactly as the pad's screen is set on % so it could adapt on different resolutions, is there a simple way of doing that?

enter image description here

Yellow's 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;
}

The red one doesn't really have anything.

I hope you understood me. Thanks beforehand.

EDIT:

html code for the screens:

<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 で測定されたパディングを組み合わせてタブレットの境界線を考慮し、border-box のボックス サイズを #screen コンテンツの正確なフィットを保証するために使用することで、探している柔軟なレイアウトが得られます。

ビューポートのメタ タグを忘れないでください。;) </p>

于 2012-10-16T20:25:20.790 に答える
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 に答える
1

あなたが何を望んでいるかを正しく理解しているかどうかはわかりませんが、 height: 100%; を試してください。赤で。

于 2012-10-16T19:54:38.763 に答える