div填充剩餘空間屏幕

我想問一下我可以用div來填充剩餘空間。div填充剩餘空間屏幕

我需要做的網站，用2份 - 一個始終在頂部，一個總是在底部

你可以給我一些這方面的想法（沒有位置是：絕對的;）

因此，這裏是我的想法 - 3周的div類： HTML：

<div class="top"><div> 
<div class="center" ></div> 
<div class="bottom"></div>

的CSS：

.bottom{ 
position:relative; 
width:100%; 
} 
.top{ 
display:block; 
min-height: 250px; 
} 
.center{ 
display:block; 
min-height:30px; 
height:auto; 
}

來源

2013-03-06 Andrey

您的目標不明確。 '.top'和'.bottom'是固定的高度嗎？對於'.center'來說，重要的是始終填充這個空間，或者你只是想讓這個區域有一定的背景色。你應該在自己的問題上投入更多精力和細節，以便人們可以真正幫助你。 – Axel 2013-03-06 16:15:00

「剩餘空間」是什麼意思？你的意思是屏幕上的剩餘空間？父母的剩餘空間？你可以創建一個JSFiddle作爲你想要做什麼的例子嗎？ – 2013-03-06 16:15:47

@Axel是的，他們是固定的高度，但我不知道該網站將運行的屏幕分辨率，因爲它是移動版本。 – Andrey 2013-03-06 16:20:42

如果你給的div的ID，您可以使用jQuery像這樣：

$(window).resize(function() { 
    resizeWindow(); 
}); 

function resizeWindow() { 
    var sHeight = $(window).height(); 
    var tHeight = $("#top").height(); 
    var bHeight = $("#bottom").height(); 
    var nHeight = sHeight - tHeight - bHeight; 
    $("#center").height(nHeight); 
}

容量調整部分還允許任何人調整畫面，如果有人用平板電腦/智能手機改變了方向。

來源

2013-03-06 16:19:57 user1166905

謝謝，但我得到了jQuery的小問題（我還在學習）這裏是我的代碼。我已經將它們更改爲在HTML/CSS中的ID，這是我的代碼爲jquery http://pastebin.com/Hj3zx2nW和它不起作用 – Andrey 2013-03-06 16:29:33

你可以提供新的html？你也可以嘗試在document.ready函數中調用resizeWindow（）？ – user1166905 2013-03-06 16:31:17

對不起，我不能提供任何代碼期望CSS http://pastebin.com/yfp8mHcZ – Andrey 2013-03-06 16:33:58

我的理解是你想要三個div放在彼此之上。

<div id="container"> 
    <div class="top"><div> 
    <div class="center" ></div> 
    <div class="bottom"></div> 
</div> 

#container { 
width:100%; 
height:100%; 
} 
    .bottom{ 
    position:relative; 
    height:25%; 
    width:100%; 
    } 
    .top{ 
    position:relative; 
    height:25%; 
    width:100%; 
    } 
    .center{ 
    position:relative; 
    height:50%; 
    width:100%; 
    }

來源

2013-03-06 16:21:13 Jefferson

我沒有告訴我想要他們25％-50％-25％。 – Andrey 2013-03-06 16:30:25

div填充剩餘空間屏幕

回答

相關問題