0

HTML と CSS のみを使用して、次のような固定レイアウトを作成することは可能でしょうか?

+- #parent ------
| +-# elem1 ---
| | Varibale height (depends on content) - top anchored
| | to #parent (top: 0)
| |
| +------------
| +-# elem2 ---
| | Varibale height (depends on content) - top anchored
| | to #elem1 bottom and bottom #anchored to #elem3 top
| |
| +------------
| +-# elem3 ---
| | Fixed height - top anchored to #elem2 bottom and
| | bottom anchored to #parent bottom (bottom: 0)
| |
| +------------
+----------------

編集: #parent 要素の高さは固定されている可能性があり、次のようなものを探しています:

http://doc.qt.nokia.com/qtquick-components-symbian-1.1/examples-native-scalability-anchors.html

http://doc.qt.nokia.com/qt-maemo/anchor-layout.html

4

1 に答える 1

0

私は誤解しましたか、それともあなたが望むものですか - http://jsfiddle.net/joplomacedo/rkKqy/ - ?

HTML

<div class="parent">
    <div class="child">varaible height child</div>
    <div class="child">varaible height child</div>
    <div class="child">fixed height child</div>
</div>​

CSS

.parent {
    position: relative;
    padding-bottom: 50px; //equal to last-child's height
}

.child:first-child {
    /*styles for the first-child here*/
}

.child:nth-child(2) {
    /*styles for the second-child here*/
}

.child:last-child {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px; //the fixed height
    /*anymore styles for the last-child here*/
}
​
于 2012-07-26T13:37:09.137 に答える