我花了至少10個小時試圖弄清楚如何用HTML和CSS實現所描述的佈局,而且我什麼都沒有想出來。我已經無休止地進行了搜索,雖然很多答案似乎已經接近,但我無法將其調整到位。CSS佈局約束到瀏覽器窗口?
我只想製作一個簡單的瀏覽器應用程序,其左側有一個頁眉,頁腳,菜單欄和一個導航欄作爲主要內容的地圖。我希望地圖被限制在內容div上,而不是「溢出但隱藏」。如果沒有任何滾動條,如果一切正常,我會愛上它。這可能與CSS?
請請,我要死在這裏!
我花了至少10個小時試圖弄清楚如何用HTML和CSS實現所描述的佈局,而且我什麼都沒有想出來。我已經無休止地進行了搜索,雖然很多答案似乎已經接近,但我無法將其調整到位。CSS佈局約束到瀏覽器窗口?
我只想製作一個簡單的瀏覽器應用程序,其左側有一個頁眉,頁腳,菜單欄和一個導航欄作爲主要內容的地圖。我希望地圖被限制在內容div上,而不是「溢出但隱藏」。如果沒有任何滾動條,如果一切正常,我會愛上它。這可能與CSS?
請請,我要死在這裏!
當然你可以將所有東西都固定住,這聽起來像是你想要的東西。 (關於「從來沒有任何滾動,一切都只是適合的地方」。) 如果這是你想要的,你可以不喜歡以下:
body,#header,#menu,#footer,#content {
position:fixed;
margin:0;
padding:0;
}
#header {
top:0;
left:0;
right:0;
width:auto;
height:40px;
}
#menu {
left:0;
top:45px;
bottom:35px;
height:auto;
width:120px;
}
#footer {
bottom:0;
left:0;
right:0;
width:auto;
height:30px;
}
#content {
right:0;
top:45px;
bottom:35px;
left:125px;
min-width:200px;
min-height:200px;
height:auto;
width:auto;
}
#navbar {
position:relative;
height:30px;
display:block;
min-width:200px;
}
#map {
position:absolute;
top:30px;
left:0;
right:0;
bottom:0;
width:auto;
height:auto;
}
像這樣的東西,每一個元素是,留在地方,只是內容將調整與窗口。雖然我必須承認,我沒有真的得到你要求的點。我希望這種適合你的需求。 說實話,我覺得你的問題有點奇怪,因爲你似乎需要學習一些CSS基礎知識。
完美,謝謝sooooo多!!!!我一直在嘗試更多困難的選擇! – 2013-03-22 23:40:56
實際上一秒,地圖溢出!有什麼想法嗎? – 2013-03-22 23:46:17
#map中必須有內容忽略寬度...嘗試添加_overflow:auto; _ to #map。 Apropos,我忘了提及(這也可能是問題):我在那裏寫的CSS期望#map和#navbar實際上是#content的_children_,如果不清楚的話。 (
大部分聽起來像你的問題是圍繞地圖的容器div。嘗試設置它像這樣的CSS屬性:
.container {
position: absolute;
top: 100px; // Offset for the header
bottom: 100px; // Offset for the footer
left: 200px; // Offset for the menu
right: 0;
}
然後把地圖中以100%的寬度和高度。
這是主意,非常感謝! – 2013-03-22 23:39:20
這有多接近:http://twitter.github.com/bootstrap/examples/fluid.html? – 2013-03-22 23:06:51
您需要顯示一些代碼,以便用戶可以指引您朝着正確的方向 – 2013-03-22 23:07:03
流體示例非常接近,但如果它可以全部簡單包含在瀏覽器中而不需要滾動,例如Google地圖,我可以製作自己的谷歌地圖,頭部,側邊菜單和地圖,全都限制在瀏覽器窗口中嗎? – 2013-03-22 23:10:26