Chiều cao xem ember

Tôi đang cố gắng xem chế độ xem gốc cho ứng dụng Ember của mình để có chiều cao đầy đủ (100%), không thành công cho đến thời điểm này.Chiều cao xem ember

Tại sao tôi cần điều đó? Tôi có một chân trang mà tôi muốn liên kết với phía dưới ngay cả khi nội dung trang không lấp đầy toàn bộ chiều cao. Cuối cùng, tôi có CSS sau đây:

.push { 
    height: 60px; 
} 

.content { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -60px; 
}

Và HTML (sử dụng Twitter Bootstrap):

<body> 
    <div class="navbar navbar-fixed-top"><!-- ... --></div> 
    <div class="content"> 
    <div class="push"><!--//--></div> 
    <div class="container"> 
    <!-- page content --> 
    </div> 
    <div class="push"><!--//--></div> 
    </div> 
    <footer>Copyright ... 2013</footer> 
</body>

này hoạt động tuyệt vời mà không Ember. Bây giờ, giới thiệu Ember:

<script type="text/x-handlebars" data-template-name="application"> 
    <div class="navbar navbar-fixed-top"><!-- ... --></div> 
    <div class="content"> 
    <div class="push"><!--//--></div> 
    <div class="container"> 
    {{outlet}} 
    </div> 
    <div class="push"><!--//--></div> 
    </div> 
    <footer>Copyright ... 2013</footer> 
</script>

Và bây giờ nó không còn hoạt động!

Điều chết tiệt chèn <div id="emberXYZ" class="ember-view"> chứa toàn bộ nội dung, mà chính nó là khá tốt, ngoại trừ div không có chiều cao đầy đủ và chân trang chỉ treo ở giữa trang ngay sau nội dung.

Tôi googled xung quanh cho một giải pháp, nhưng không thể tìm thấy bất cứ điều gì mà sẽ cho phép tôi làm việc xung quanh vấn đề này. Đoán của tôi là cách đơn giản nhất là đặt Ember đặt chế độ xem gốc thành 100% chiều cao (dường như không thể tìm cách thực hiện điều đó), nhưng có thể có một số mẹo thông minh khác sẽ thực hiện được những gì tôi muốn. Dù là giải pháp nào, tôi cũng cần nó ít nhất là tương thích với IE8.

Cảm ơn trước!

Nguồn

2013-03-26 user510159

tại sao không phải '.container> div {min-height: 100%; } '? –

Thật không may, điều đó không giúp ích gì. Nếu 'nội dung' đã có độ cao tối thiểu được đặt thành 100% thì sự cố không phải là' vùng chứa'. Vấn đề là div xem ember không có chiều cao đầy đủ. – user510159

Ồ, ý bạn là giao diện ứng dụng. App.ApplicationView = Ember.View.extend ({classNames: ['my-class']}) –

Ở đây tôi có thể đưa ra hai câu trả lời không thực sự liên quan đến Ember.JS
1) Cách đặt phần tử gốc của chiều cao EMberApp thành 100% - Bạn không cần thực hiện bất kỳ chỉnh sửa nào trong mã Ember App . Trong CSS, chỉ cần đặt chiều cao của lớp xem ember thành 100%.

.ember-view { 
height: 100%; 
}

nếu bạn muốn tránh các chế độ xem khác sử dụng kiểu này, bạn có thể sử dụng id chế độ xem như ở đây được chỉ định một emberXYZ.

Nhưng yêu cầu thực tế của bạn là
2) Làm chân chỉ mất dưới cùng của page-- Bạn thực sự có thể làm cho chân absolute và thiết lập giá trị bottom-0.

footer { 
position:absolute; 
bottom: 0px; 
}

Nguồn

2013-03-26 17:45:18 thecodejack

Cảm ơn câu trả lời của bạn. Thật không may, đối với 1), thiết lập chiều cao trong lớp xem ember sẽ gây rối với tất cả các khung nhìn khác và phần XYZ trong id là động (nó có thể được giải quyết theo cách này, nhưng tôi cần tìm cách thêm một id cố định vào chế độ xem Ember gốc - dường như không được ghi lại). Đối với 2), việc sử dụng vị trí tuyệt đối là gian lận. Bất kỳ cách nào tôi có thể làm điều này mà không có tuyệt đối, nhưng theo một cách mà sẽ làm việc tốt hơn so với ở trên với Ember? – user510159

Để chỉ định ID phần tử cụ thể cho chế độ xem ember, bạn đặt thuộc tính 'elementId'. Rõ ràng, mỗi HTML, nó phải là duy nhất trên trang. –

Nếu bạn xác định xem ứng dụng bạn có thể tùy chỉnh những thứ như các lớp:

App.ApplicationView = Ember.View.extend({ 
    classNames: ["ember-app"] 
})

Sau đó bạn có thể định nghĩa css của bạn:

.ember-app { 
    height: 100%; 
}

Nguồn

2013-08-03 17:23:36

Đây là cách ember. – FutoRicky

tôi đã cùng một vấn đề cố gắng có được các chân trang để làm việc với Ember JS và Bootstrap. Như bạn đã lưu ý vấn đề nằm với Ember JS tạo khung nhìn trong một vùng chứa div mà không nhận được chiều cao 100%.

Vì Ember chỉ hiển thị 1 con tức thì .ember-view tới <body> (tức là chế độ xem Ứng dụng). Chúng tôi có thể sử dụng CSS này sẽ hoạt động trong các trình duyệt, bao gồm IE8.

/* Works in all browsers, does not effect other views within your application */ 
body > .ember-view { 
    height: 100%; 
}

Nó không ảnh hưởng đến bất kỳ .ember-view 's được subviews bên trong ứng dụng của bạn bởi vì họ sẽ không con trực tiếp của trang của bạn <body>.

Nguồn

2013-11-03 15:58:14 Scott

Rõ ràng hai giải pháp này không hoạt động. Không phải dạng xem tháng mười hai đơn giản {height: 100%}. Tôi có thể thấy div lớp xem ember trong thanh tra mặc dù. Bất kỳ ý tưởng? –

Không hoạt động được. Đã phải sử dụng flex trên lớp xem ember. –

Chỉ để cho mọi người biết, giải pháp này hiệu quả với tôi. Đối với Ember v1.11, trước tiên tôi phải ghi đè lên ember rootElement Ember.Application.create mặc định. Sau đó đặt rootElement của tôi thành 100% chiều rộng và chiều cao. Sau đó, giải pháp trên đã hoạt động ngay lập tức. –

Gần đây, tôi đã gặp phải vấn đề này và đã mất một thời gian để khắc phục sự cố và tôi chỉ muốn chia sẻ giải pháp của tôi với các bạn.

"ember-cli": "2.13.1"
"bootstrap": "^ 4.0.0-alpha.6"

Vì vậy, khi user510159 viết mà vấn đề nằm với lớp ember xem đó là đang được thiết lập.

Giải pháp từ Scott để thêm thuộc tính height: 100%; vào lớp chế độ xem ember là một nửa của giải pháp.

/* Works in all browsers, does not effect other views within your application */ 
    body > .ember-view { 
    height: 100%; 
}

Đối với nó để làm việc trong trường hợp của tôi, tôi đã phải thiết lập các thuộc tính chiều cao cho div yếu tố bên trong của html của tôi.

<div class=ember-view> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div>

SCCS:

#header { 
    height: 20%; 
} 

#content{ 
    height: 70%; 
} 

#footer { 
    height: 10%; 
}

Tôi hy vọng điều này sẽ giúp.

Nguồn

2017-05-24 13:23:29

Chiều cao xem ember

Trả lời

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