2
希望我正確地問這個問題。如何製作DIV元素固定但不可縮放？
基本上，我試圖在我的設計中實現一個下拉菜單。我一直在尋找編碼的幫助，因爲我對HTML/CSS還比較陌生，並且發現了一些很棒的教程，我已經修改了一些以適應我的想法。
我現在面臨的問題是我不希望我的東西被縮放到如此之大。當瀏覽器調整大小時，它會移動我的div，並保持我的下拉菜單。這不是我想要我的設計的方式。希望我寫的描述可以幫助你確定我在找什麼。
我已閱讀，您可以通過使用包裝div來設置網站的分辨率來實現此目的。我試過這樣做，但是它破壞了我當前的代碼，至少是我試圖實現它的方式。
這裏是我想達到的顯示的一個例子：代碼
下面是摘錄從我的HTML和CSS項目：
HTML:
<!--Nav Wrapper-->
<div class="wrapper">
<ul class="nav">
<li><a href="#">Final Cut</a>
<!--Begin Main Div-->
<div class="navMain">
<!--Begin Sub Nav-->
<div class="navLeft">
<span class="nav-titles">DBZ Final Cut: Navi</span><br><br><br>
<div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a></div>
<div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a></div>
<div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a></div>
<div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a></div>
<br><br><span>This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>
</div>
<!--End Sub Nav-->
<li><a href="#">Articles</a></li>
<li><a href="#">Sets</a></li>
<li><a href="#">Resources</a></li>
</ul> <!--End Nav List-->
</div> <!--End of Nav Wrapper-->
CSS：
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: Serif, sans-serif;
background: white;
font-size: 62.5%;
color: black;
}
.wrapper {
font-size: 1em;
padding: 2em;
margin: 0 auto;
width: 80%;
background-color: white;
}
.nav {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
border: 1px solid #002232;
}
.nav li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
.nav > li > a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
text-transform:uppercase;
}
.nav > li:hover {
left: -1px;
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
}
.nav > li:hover > div {
left: -1px;
display: block;
}
.nav > li > div {
position: fixed;
right: 0px;
top: 87px;
height: 300px;
display: none;
padding: 10px 10px;
box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.4);
background:#F4F4F4;
overflow: hidden;
}
.navMain {
margin:-4px auto;
position:fixed;
text-align:left;
border:1px solid #777777;
border-top:none;
width: 900px;
/* Gradient background */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
}
.nav-titles {
display: inline-block;
font-size: 1.2em;
font-weight: bold;
text-align: left;
padding-right: 3px;
}
.navIcon {
width: 15px;
height: 15px;
}
.navDropLinks {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
display:block;
padding-bottom: 6px;
}
.navDropLinks > a {
color: black;
text-decoration: none;
font-weight: bold;
}
.navLeft {
position: absolute;
left: 10px;
width: 288px;
display: inline-block;
font-size: 11px;
text-align: left;
padding-right: 3px;
}
.navCenter {
position: absolute;
width: 280px;
left: 313px;
font-size: 11px;
text-align: center;
}
.navRight {
position: absolute;
right: 10px;
width: 280px;
display: inline-block;
font-size: 11px;
text-align: center;
padding-left: 3px;
}
.navImage {
display: inline-block;
width: 275px;
height: 120px;
}
我不是看問題，當我重新創建它的jsfiddle它不會重新大小 - https://jsfiddle.net/bdevybss/ –
下拉菜單是固定的，像這樣： http://imgur.com/a/RYIRq 這就是我希望它顯示的方式，無論瀏覽器窗口的大小如何。 –
所以你想下拉菜單總是適合屏幕？ –