Cố gắng đạt được bố cục flexbox bằng vật liệu góc nơi điều hướng và chân trang có chiều cao cố định, nội dung sẽ có thể cuộn được (sử dụng nội dung md) và chân trang sẽ xuất hiện sau nội dung có thể cuộn. Giải pháp của tôi hoạt động tốt trong chrome và firefox, nhưng không hoạt động trong safari. Trong safari, Footer xuất hiện ở dưới cùng của khung nhìn, chồng lên nhau nội dung cuộn được. Bất kỳ cách nào để đạt được hiệu quả tương tự trong tất cả các trình duyệt?Bố cục flexbox CSS không hoạt động trong safari

html:

<!DOCTYPE html> 
<html> 

    <head> 

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css"> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic" /> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script> 

    <link rel="stylesheet" href="style.css" /> 

    </head> 

    <body layout='column'> 

    <div id='nav'> 
     Nav 
    </div> 

    <md-content flex layout='column'> 

     <div id='content' flex> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 

     <div id='footer'> 
     Footer 
     </div> 

    </md-content> 

    </body> 

</html>

css:

* { 
    margin: 0; 
} 

body { 
    overflow: hidden; 
    max-width: 100%; 
    max-height: 100%; 
} 

#nav{ 
    background-color: green; 
    -webkit-flex: 0 0 65px; 
    flex: 0 0 65px; 
} 

#content{ 
    background-color: blue; 
} 

#footer{ 
    background-color: red; 
    -webkit-flex: 0 0 115px; 
    flex: 0 0 115px; 
}

plunkr:

http://plnkr.co/edit/ibi6v1LTy9dLducHuMdM

Nguồn

2015-08-06 Bill Johnston

#content { 
    -webkit-flex: 1 0 auto; 
    flex: 1 0 auto; 
}

sẽ đủ.

Nguồn

2015-08-07 20:46:32 gavin19

hệ thống cấp bậc của bạn là một chút rung rinh, và dường như Safari đang vật lộn với điều đó.

Bằng cách di chuyển chân trang thành anh chị em của các yếu tố #nav và md-content và loại bỏ màn hình flex dự phòng, bạn có thể nhận bố cục bạn đang tìm kiếm.

New HTML:

<div id="nav"> 
     Nav 
    </div> 
<md-content layout="column"> 
    <div id="content"> 
    <p>...</p> 
    ... 
    <p>...</p> 
    </div> 
</md-content> 
<div id="footer"> 
    Footer 
</div>

New CSS:

#content{ 
    background-color: blue; 
    -webkit-flex: 1 1; 
    flex: 1 1; 
}

`Plunkr Example`

Nguồn

2015-08-06 21:50:26

Tôi cần chân trang dính, không cố định. Cảm ơn mặc dù –

Chú ý theo nghĩa nó tuân theo nội dung? Vì vậy, đặt nó trong nội dung và tránh các flex trên các yếu tố hoàn toàn. Bạn không cần một màn hình flex cho điều đó. Đây là một ví dụ: http://plnkr.co/edit/M4KeFHNTyumbd5H6s7bg?p=preview –

Có như vậy, nhưng khi nội dung không cuộn, chân trang sẽ xuất hiện ở cuối chiều cao xem. Như thế này: [https://css-tricks.com/snippets/css/sticky-footer/](https://css-tricks.com/snippets/css/sticky-footer/). Tôi không thể làm cho nó hoạt động từ bên trong nội dung md. –

Bố cục flexbox CSS không hoạt động trong safari

Trả lời

Plunkr Example

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

`Plunkr Example`