Tạo cấu trúc trang web có chân trang ở dưới cùng và nội dung 100%

Tôi muốn thiết kế cấu trúc cho trang web nhưng tôi gặp sự cố mà tôi không thể duy trì nó. Đây là những gì tôi muốn:Tạo cấu trúc trang web có chân trang ở dưới cùng và nội dung 100%

một trang web với 3 phần:

1-header 
    2-content(has 2 parts, a sidebar and a content section) 
    3-footer

và tôi muốn những đặc điểm này:

1- if in the content section there is nothing then footer stays at the bottom, if we have content, footer pushes down and stays after my content 
    2- my sidebar(exist in the content section) take 100% height of content section and connects to footer

như thế này:

enter image description here

tôi xây dựng này với mã này và nó hoạt động, nhưng vấn đề của tôi là nếu nội dung của sid ebar khu vực được lớn hơn, bên và khu vực nội dung chính chồng chéo footer! Tôi muốn rằng trong tình huống này, chân trang vẫn sau nội dung của tôi.

Tôi sử dụng Twitter Bootstrap cho công việc của mình. Tôi không muốn sử dụng các phương thức chỉ có sẵn trong các trình duyệt mới. ít nhất là IE 9.

đây là mã của tôi:

<!DOCTYPE html> 
<html> 
<head> 
<title>test</title> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="bootstrap.min.css" /> 
<link rel="stylesheet" href="style.css" /> 
</head> 

<body> 

    <div class="container-fluid"> 

     <div class="row header"> 
      <div>header</div> 
     </div> 

     <div class="row content"> 
      <div class="col-lg-2 sidebar"> 
       <div>content</div> 
       <div>content</div> 
       <div>content</div> 
       <div>content</div> 
       <div>content</div> 
       <div>content</div> 
       <div>content</div> 
       <div>content</div> 
       <div>content</div> 
       <div>content</div> 
       <div>content</div> 
       <div>content</div> 
       <div>content</div> 
       <div>content</div> 
       <div>content</div> 
       <div>content</div> 
       <div>content</div> 
       <div>content</div> 
       <div>content</div> 
       <div>content</div> 
      </div> 
      <div class="col-lg-10">content</div> 
     </div> 

     <div class="row footer"> 
      <div>footer</div> 
      <div>footer</div> 
      <div>footer</div> 
      <div>footer</div> 
      <div>footer</div> 
     </div> 
</div>

và đây là CSS:

body,html{ 
    height: 100%; 
} 

.container-fluid { 
    height:100%; 
} 


.header{ 
    background-color: #ccff55; 
    } 

.content{ 
    background-color: #445566; 
    height: -webkit-calc(100% - 10%); 
    } 

    .sidebar{ 
    background-color: #446655; 
    height: 100%; 
    } 

    .footer{ 
    background-color: #11ff99; 
    }

Nguồn

2015-05-24 Fcoder

trùng lặp càng tốt này của [Làm thế nào để bạn có được chân để ở lại ở dưới cùng của một trang web? ] (http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-p tuổi) – connexo

Đây là một sử dụng tuyệt vời của tài sản 'calc' ... 100% - 10%. Haha ... bạn đã thử 90% chưa? Haha ... –

@connexo: không có điều này không phải là tôi muốn và đây không phải là một bài đăng trùng lặp. bài đăng mà bạn đã đề cập là một nửa câu hỏi của tôi, chỉ cần đặt chân trang ở cuối. tôi muốn 100% nội dung quá – Fcoder

Ok, hãy thử này. Nó làm việc cho tôi. Có lẽ một số tinh chỉnh là cần thiết, nhưng về cơ bản đây là những gì bạn muốn.

<!DOCTYPE html> 
<html> 
<head> 
<title>test</title> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="bootstrap.min.css" /> 
<link rel="stylesheet" href="style.css" /> 
<style type="text/css"> 
body,html{ 
    height: 90%; 
    margin:0px; 
    padding:0px; 
} 

.container-fluid { 
    min-height:100%; 
} 


.header{ 
    background-color: #ccff55; 
    } 

.content{ 
    background-color: #445566; 
    height: -webkit-calc(100% - 10%); 
    } 

    .sidebar{ 
    background-color: #446655; 
    height: 100%; 
    } 

    .footer{ 
    background-color: #11ff99; 
    bottom:0px; 
    position:relative; 
    min-width:100%; 

    } 
</style> 
</head> 

<body> 

    <div class="container-fluid"> 

     <div class="row header"> 
      <div>header</div> 
     </div> 

     <div class="row content"> 
      <div class="col-lg-2 sidebar"> 

      </div> 
      <div class="col-lg-10"> 
       <p>content</p> 
       <p>content</p> 
       <p>content</p> 
       <p>content</p> 
       <p>content</p> 
       <p>content</p> 
       <p>content</p> 
       <p>content</p> 
       <p>content</p> 
       <p>content</p> 
       <p>content</p> 
       <p>content</p> 
       <p>content</p> 
       <p>content</p> 
       <p>content</p> 
       <p>content</p> 
       <p>content</p> 
       <p>content</p> 
      </div> 
     </div> 


</div><div class="row footer" > 
      <div>footer</div> 
      <div>footer</div> 
      <div>footer</div> 
      <div>footer</div> 
      <div>footer</div> 
     </div> 
</body> 
</html>

Nguồn

2015-05-24 17:10:22

không hoạt động và mọi thứ chồng chéo mọi thứ. bạn đã thử nó chưa – Fcoder

@Fcoder Vâng tôi đã làm, trên thực tế tôi có nó trên một tab khác. Tôi sẽ kiểm tra lại. –

@Fcoder Hãy nhìn xem, https://jsfiddle.net/u0dyhLkf/ –

Nó chồng chéo vì phần tử .content của bạn có chiều cao tính bằng 10% so với chiều cao của thân. Điều này cho phép footer leo lên, gây ra sự chồng chéo.

Nội dung của bạn sẽ luôn ở nơi hiện tại vì bạn không có gì trong CSS để tạo trang sẽ tạo .content và thanh bên cạnh nhau, chẳng hạn như sử dụng phao và định kích thước các phần tử.

Nguồn

2015-05-24 17:14:03 Rob

Hãy thử như sau:

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

Nguồn

2015-05-24 17:15:49

không, nó không giúp được gì: ( – Fcoder

Bạn có thể sử dụng một phương pháp js Tôi đã viết rằng sẽ giúp bạn sửa chữa các tiêu đề ở cuối trang:

<script type="text/javascript"> 
window.onload = function(event) { resizeDiv(); } 
window.onresize = function(event) { resizeDiv(); } 
function resizeDiv() { 
    vpw = $(window).width(); 
    vph = $(window).height()-54; 
    $('#main').css({'height': vph + 'px'}); 
    $('.container').css({'height': vph + 'px'});  
    $('.sidebar').css({'height': vph + 'px'}); 
    } 
</script>

Thích ứng 54 với chiều cao của bạn chân trang. Sau đó, nếu bạn thêm vào css:

.container{ 
    overflow: scroll; 
} 
.sidebar{ 
    overflow: scroll; 
}

chân trang của bạn sẽ luôn hiển thị ở cuối màn hình. Khác, chân trang sẽ đi sâu hơn khi nội dung của vùng chứa sẽ lớn hơn sau đó được đặt bởi js. Đừng quên đặt trong tài liệu của bạn.đã có chức năng gọi lại để thay đổi kích thướcDiv(); để sử dụng nó khi bạn tải trang.

$(document).ready(function(){ 
    resizeDiv(); 
});

Sử dụng JS bạn sẽ không gặp sự cố trên tất cả các trình duyệt và thậm chí trong các phiên bản cũ.

Nguồn

2015-05-24 17:38:31

css

#wap { 
    background-color: #532485; 
    width: 80%; 
    height: auto; 
    margin: auto; 
} 
.header { 
    background-color: #123456; 
    width: 100%; 
    height: 60pt; 
} 
.menu { 
    background-color: #154856; 
    width: 100%; 
    height: 120pt; 
} 
.left { 
    background-color: #154896; 
    width: 30%; 
    height: 200pt; 
    float: left; 
} 
.center { 
    background-color: #897535; 
    width: 40%; 
    height: 200pt; 
    float: left; 
} 
.right { 
    background-color: #154896; 
    width: 30%; 
    height: 200pt; 
    float: left; 
} 
.footer { 
    background-color: #567829; 
    width: 100%; 
    height: 60pt; 
    float: left; 
} 
ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 
ul li { 
    float: left; 
} 
ul li ul { 
    display: none; 
} 
ul li:hover ul { 
    display: block; 
} 
ul li a { 
    background: #f2f2f2; 
    text-decoration: none; 
} 
ul li a:hover { 
    color: #fff; 
    background: #128536; 
    border-radius: 20px; 
}

html

<div id="wap"> 
    <div class="header">header</div> 
    <div class="menu"> 
     <ul> 
      <li>home</li> 

      <li>service 
       <ul> 
        <li> a</li> 
        <li> b</li> 
       </ul> 
      </li> 

      <li>about</li> 
     </ul> 
    </div> 
    <div class="left">left</div> 
    <div class="center">center</div> 
    <div class="right">right</div> 
    <div class="footer">footer</div> 

</div>

như

Click here

Nguồn

2017-10-24 05:12:31 darshan

Tạo cấu trúc trang web có chân trang ở dưới cùng và nội dung 100%

Trả lời

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