0

アダプティブ Web サイトの構築中に問題が発生しました。それがどうあるべきかを見てください：

http://tweakers.net/ext/f/O1sEWJd53lwKA3Gv3W0CJDgW/full.png

CSSに次のコードがあります：

.HTML { 
    min-width: 100%; 
    height: 100%; 
} 

.page { 
    margin-top: 4.3%; /* 215px : 4960px */ 
    margin-left: 4.76%; /* 172px : 3615px */ 
    margin-right: 4.6%; /* 168px : 3615px */ 
    height: 100%; 
} 

.header { 
    width: 100%; 
    height: 13.95%; /* 661px : 4737px */ 
} 

.logo { 
    margin-left: 7.51%; /* 246px : pagewidth */ 
    width: 28%; /* 918px : pagewdith */ 
    height: auto; 
    float: left; 
} 

.searchbox { 
    margin-top: 24.4%; /* 161px : 661px */ 
    float:right; 
    width: 22.4%; /* 737px : pagewidth */ 
}

ロゴは正常に表示されますが、検索ボックスのマージン上部は、ヘッダー クラスの上部からではなく、HTML の上部からのマージンのようです。それはあまりにも低くなります。画像の高さもレスポンシブであるため、レスポンシブである必要があります。検索ボックスはロゴの下部が揃っているため、ロゴの高さに適応する必要があります。

さらに、ヘッダーの高さの 5% の高さを持つべき別のクラスがありますが、高さを与えると: 5%; Chrome 23 では高さが 0px になります...これはどうしてですか?

私のHTML：

<body>
    <div class="page">
        <div class="header">
            <div class="logo">
                <img />
            </div>
            <div class="searchbox"></div>
        </div>
    </div>
</body>
4

1 に答える 1

0

「位置を入れてみてください：親に対して相対的で、位置：子に対して絶対的です。」-サイバーショット

ソース: http://css-tricks.com/forums/discussion/9608/solved-margin-extends-beyond-parent/p1

この回避策は、これを解決するために私が持っている最も近いものです。

于 2013-02-11T08:49:01.647 に答える