Các vấn đề về độ cao

Tôi gặp vấn đề về chiều cao. Tôi có một chân sau mã dưới đây:Các vấn đề về độ cao

<html> 
<body> 
    <div class='wrap'> 
     <div class=principal></div> 
     <div class='clear'></div> 
     <footer><img alt='Logotype' /></footer> 
    </div>  
</body> 
</html> 


html,body{ 
    height:100%; 
}; 

.wrap{ 
    height:auto!important; 
    height:100%; 
    min-height:100%; 
    width:100%; 
} 

.clear{ 
    clear:both; 
} 

footer{ 
    position:absolute; 
    bottom:0; 
    height:50px; 
    width:100%; 
}

Có một cách khác đó là đưa margin: 0 auto -50px trong .wrap, và đặt chân bên ngoài bọc.

Tôi cần có .principal để có 100% chiều cao khi không có quá nhiều nội dung vì tôi có thành phần tiêm vào .principal a <div style='height:100%>insert text and graphics/charts here</div>.

Xem ví dụ dưới đây để hiểu rõ hơn:

Hình 1:

Content 100%

tôi cần những nội dung (.principal) để có 100% chiều cao vì thành phần. Tôi có một trình đơn mở ra khi được nhấp và nó sẽ có kích thước của nội dung (.principal), tôi muốn chân trang ở cuối trang.

Hình 2:

Scrolling Content

Nếu có nhiều nội dung hơn (do văn bản hoặc một cái gì đó) tôi muốn có một cuộn và chân biến mất, và tiêu đề cố định.

Hình 3:

Image

Ở dưới cùng của các cuộn, nó sẽ xuất hiện chân. Khi menu được mở, menu sẽ có chiều cao của kích thước của nội dung được hiển thị (trong trường hợp này là height = window-height-footer).

Vì vậy, có một cách mà một phần tử có thể có 100% chiều cao, nhưng khi có nhiều nội dung nó mở rộng?

Trở ngại:

Tôi không thể sử dụng mô hình flexbox vì IE8 + (tương thích cần thiết).
Tôi không thể sử dụng chiều cao: calc vì Safari và IE.
Tôi không thể đặt mọi thứ ở độ cao: 100% vì chân trang.
Tôi không thể đặt hình ảnh vì danh tiếng.

Nguồn

2015-05-26 Marcos Schneider

Chỉ cần tò mò, những gì hiện đứng OBS cho? – technophobia

Đừng bận tâm, đó là "Ghi chú" bằng tiếng Bồ Đào Nha. Obrigado! – technophobia

Tôi không biết liệu tôi có hiểu chính xác bạn hay không. Bạn không dính chân?

html, body { height: 100%; } 
 
#wrap { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -50px; } 
 
#footer, #push { margin: 0 auto; height: 50px; }

<body> 
 
    <div id="wrap"> 
 
    your content goes here 
 
    <div id="push"></div> 
 
    </div> 
 
    <div id="footer">Your footer</div> 
 
</body>

Nguồn

2015-05-26 21:18:43 Tomasz

Tôi nghĩ rằng đây có thể là những gì bạn đang tìm kiếm:

Demo: http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/

Đó là một kịch bản đơn giản mà làm cho dính chân của bạn xuống đáy trang nhưng một khi bạn thêm nhiều nội dung, nó sẽ đi xuống với nó. (Demo)

Đây là một ví dụ sử dụng kịch bản này: (Tôi cũng đã thêm một hướng cố định) html:

<div id="wrapper"> 

    <div id="header"> 
     <div id="nav"></div> 
     <div id="content_push" style="width: 100%; height: 50px;"></div> <!-- makes sure the first content doesn't dissapear beneeth the nav> 
    </div><!-- #header --> 

    <div id="content"> 
     Copy this to add content<br><br><br><br> 
     Copy this to add content<br><br><br><br> 
     Copy this to add content<br><br><br><br> 
     Copy this to add content<br><br><br><br> 
    </div><!-- #content --> 

    <div id="footer"> 
    </div><!-- #footer --> 

</div><!-- #wrapper -->

css:

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#wrapper { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ededed; 
    padding:0px; 

} 
#nav{ 
    width: 100%; 
    height: 50px; 
    position: fixed; 
    background-color: green; 
} 
#content { 
    padding-bottom:100px; /* Height of the footer element */ 
} 
#footer { 
    background:#ffab62; 
    width:100%; 
    height:100px; 
    position:absolute; 
    bottom:0; 
    left:0; 
}

Thử ra: https://jsfiddle.net/krjoqfru/

Nguồn

2015-05-26 22:33:08

Tôi hy vọng điều này có thể giúp bạn.

* { margin: 0; padding: 0; } \t 
 
body { height:100%; width: 100%; position: absolute; } 
 
header { height: 50px; width: 100%; position: fixed; } 
 
.principal { min-height: 100%; width: 100%; } 
 
footer { height:50px; width:100%; }

<header style="background: green;"></header> 
 
<div class='principal' style="background: red;"></div> \t 
 
<footer style="background: blue;"></footer>

Nguồn

2015-05-27 10:01:36

Các vấn đề về độ cao

Trả lời

Các vấn đề liên quan