2015-01-16 18 views
7

Tôi muốn một khung nội tuyến để lấp đầy tất cả khoảng trống bên dưới thanh điều hướng. Tôi thấy rằng Ionic đang tạo CSS nội tuyến và thêm các lớp vào html, các thẻ body và nó cũng tạo ra các trình bao bọc div. Tôi không biết cách dự định để đạt được những gì tôi muốn. Tôi có cần sử dụng một số lớp CSS được tạo sẵn cho mục này hay không? Nếu vậy, làm thế nào tôi nên làm điều đó, để không phá vỡ bố trí.Làm thế nào để làm cho một container điền toàn bộ màn hình bên dưới thanh điều hướng trong Ionic?

Câu hỏi không thực sự quan tâm đến iframe, đó là về việc một vùng chứa lấp đầy toàn bộ không gian bên dưới thanh điều hướng.

Hiện tại iframe có chiều rộng đầy đủ nhưng chỉ có chiều cao 150 pixel, vì vùng chứa chính có chiều cao 150px.

Đơn đăng ký của tôi dựa trên (tabs application from github).

Mã của tôi là dưới đây:

index.html:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 
    </head> 
    <body ng-app="starter"> 
    <ion-nav-bar class="bar-stable"> 
     <ion-nav-back-button> 
     </ion-nav-back-button> 
    </ion-nav-bar> 
    <ion-nav-view style="width: 100%; min-height: 100%; height: 100%;"> 
     <!-- tab-map is shown here: --> 
    </ion-nav-view> 
    </body> 
</html> 

tab-map.html:

<ion-view view-title="Map" style="width: 100%; min-height: 100%"> 
    <div style="width: 100%; min-height: 100%"> 
    <ion-content class="padding" > 
     <iframe src="../index.html" style="width: 100%; min-height: 100%">  
     </iframe> 
    </ion-content> 
    </div> 
</ion-view> 

Tại thời điểm nó trông như thế này:

At the moment it looks like this

Trả lời

20

dòng CSS này giải quyết vấn đề đối với tôi:

.scroll{height: 100%;} 
+4

Mọi người đều trả lời câu hỏi này nhưng nếu bạn làm điều đó, bạn sẽ có một cuộn tối thiểu dẫn đến hành vi lạ. –

+0

Rực rỡ. Điều đó đã làm cho tôi quá. – edwardbrosens

4

Có một lớp được gọi là .scroll in ionic.css, đã thêm chiều cao: 100% vào kiểu cục bộ để ghi đè lên và nó dường như giải quyết được sự cố cho tôi.

4

Tôi nghĩ làm việc này tốt hơn, vì nó điều chỉnh để các nội dung:

Tổng kết các ion-nav-view bên ion nội dung và đặt thuộc tính này trong thẻ nội dung ion

overflow-scroll="true" 
+1

Tốt hơn rất nhiều vì nó không lộn xộn cuộn – User528491

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