用CSS維護底部位置時調整頂部

我正在處理的網站是用來複制您可以打印的文檔。有一個標題，一個正文和一個頁腳。所有這三個元素都使用CSS來調整每個元素的邊距和高度。用CSS維護底部位置時調整頂部

頁腳高0.5英寸，頁面底部必須至少0.5英寸，但不能超過0.5英寸。基於其他文字處理器，如果頁腳大於0.5英寸，則頁腳在頁面上向上移動，以保持0.5英寸邊界。

這意味着身體會縮小，所以我已經設置了它（我認爲），這樣一個更大的腳註會縮小身體，這是預期的行爲。

但是，我想要的是讓頁腳調整其在頁面上的位置，使其始終距頁面底部至少0.5英寸的方式。

注意我希望解決方案適用於一個文檔的任意數量的頁面，因此我無法使用固定位置。

我包括我的演示代碼，只要高度足夠小就可以工作。

<div style="height: 9in; 
padding-left: 1in; 
padding-right: 1in; 
padding-top: 0.5in; 
padding-bottom: 0.5in; 
background-color: #eee; 
margin-top: -0.08in; 
margin-left: -0.08in;"> 
      <div style="height: 0.5in"> Nick 1 </div> 
      <div style="max-height: 9in; height: 9in;">I love stuff.</div> 
      <div style="min-height: 0.5in; height: 0.5in; margin-top: 0.5in;">Footer</div> 
</div>

來源

2013-03-21 Nick Felker

也許我誤解了，但爲什麼不使用margin-bottom：0.5in？ – AliBZ 2013-03-21 20:46:47

完全無關，對不起。你是我見過的第一個使用'in'的人。有什麼特別的原因？ – user2019515 2013-03-21 20:47:59

@ user2019515我在想同樣的事情。以及什麼奇怪的內聯樣式。那麼這與HTML5或文字處理器相關呢？無論如何，我認爲你應該閱讀外部樣式表並使用em（或者至少百分比）。回答我認爲是你的問題，粘腳。 – 2013-03-21 20:56:01

查看CSS sticky footer技術。

器的原理是這樣的：

內容具有底部填充等於頁腳
頁腳的高度使用相對定位
頁腳具有頂部餘量等於它自己的（否定）高度

結果是頁腳與內容填充的重疊。由於尺寸匹配，重疊會使頁腳「粘」到內容結束的位置。

來源

2013-03-21 20:48:15

這實質上是一個粘性的頁腳。

的CSS

.wrap { 
    min-height:100%; 
    margin-bottom: -.4in; /* same as footer */ 
} 
.push, #footer { 
    height:.4in; 
}

的HTML

<div class="wrap"> 
<div></div> 
<div></div> 
<div class="push"></div> 
</div> 
<div id="footer">

來源

2013-03-21 21:00:08

我會建議你使用本地JavaScript或jQuery的CSS是不是一種編程語言，但JavaScript的會給你更多的功能，用於測試所需要的條件

來源

2013-03-21 21:10:52

我用JavaScript做了一個試用，結果很容易工作。 'h = $（'。header'）。height（）; f = $（'。footer'）。height（）; （'。footer'）。css（'margin-top'，' - '+（f/h）+'in'）; ' – 2013-03-23 03:51:41

我不認爲你要找的東西只能用CSS來完成，至少在flexbox模型得到更廣泛的支持之前是如此。如果您使用Chrome 24或更高版本，你可以在http://jsfiddle.net/2late2die/bNJZG/1/

.page { 
    width:8in; 
    height:10.5in; 
    background:#fff; 
    position:relative; 
    margin:.5in auto; 
    box-shadow:rgba(0,0,0,.2) 0 0 .1in; 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flex; 
    display: flex; 
    -webkit-flex-flow: column; 
    -moz-flex-flow: column; 
    -ms-flex-flow: column; 
    -ms-flex-direction: column; 
    flex-flow: column; 
} 
.page .body { 
    -webkit-flex: 1 0 auto; 
    -moz-flex: 1 0 auto; 
    -ms-flex: 1 0 auto; 
    flex: 1 0 auto; 
}

在行動中看到下面的代碼它基本上設置頁面的身體是延伸到佔據頭之間的整個垂直空間Flexbox的項目和頁腳。但是，您仍然需要自己管理身體的高度，因爲如果它超過了頁眉和頁腳之間的空間，它會溢出。

來源

2013-03-22 03:49:32 ilia

用CSS維護底部位置時調整頂部

回答

相關問題