0

カスタム CSS Web ページを作成しようとしていますが、最小の高さを 900px 前後にしない限り、すべての画像を表示するのが困難です。インデックスコードは次のようになります。

<head>
<style type="text/css">
@import url("stylesheets/mystyle.css");
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Small Biz Labs</title>

</head>

<body>
<div class="wrap">
        <div class="conatiner" align="center">
                <div class="header">
                    <center>
                        <img src="images/logo.png" width="200" height="100" />
                    </center>
                </div>
                <div class="text">
                    <h1>Maybe a header</h1>
                    <p>some text</p>
                </div>
        </div>
</div>


</body>


</html>

CSSコードは次のようになります...

/* 
Document   : mystyle
Created on : Jul 18, 2012, 1:12:14 PM
Author     : someguy
Description:
    Purpose of the stylesheet follows.
*/

html {
background:url(../images/bodybackground.jpg) repeat;
margin:0px;
max-height:100%
}

body {
background:url(../images/paperbackground.jpg) repeat-y center;
margin:0px;
margin:0px;
max-height:100%;

}


.wrap {
background:url(../images/new_backdrop.png) repeat-x center bottom fixed;
margin:0px;
min-height:1050px;
}


.container { 
max-width:600px;

}

.header {
}

.text {
text-align:left;
max-width:600px;
padding-left:10px;
}

作成した 2 つのテクスチャの上にボトルを浮かせようとしています。テキスト/画像などを、紙のテクスチャの小さくて軽いバージョンに配置できるようにします。これまでのところ、max-height を十分に大きく設定した場合にのみ、これを実現できます。コードを調整する方法について何か提案はありますか? 私が使用している画像は、より多くのポイントを獲得するまで投稿できませんが、それらを見たい場合は、jpg と 1 つの png (浮いているもの) をお知らせください。

セミライブバージョンの jsfiddleを見たい場合: http://jsfiddle.net/wKtGv/

4

1 に答える 1

0

height:100%; を追加してみてください。body と .wrap http://jsfiddle.net/wKtGv/13/の両方に

于 2012-07-26T05:38:19.023 に答える