Question

我在构建自适应网站时遇到了一些问题。看看它应该如何：

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>

Answer 1

“尝试放置一个位置：相对于父级和位置：绝对是孩子。” -cybershot

来源：http://css-tricks.com/forums/discussion/9608/solved-margin-extends-beyond-parent/p1

这个解决方法是我解决这个问题的最接近的方法。

CSS自适应高度问题

1 个答案: