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 这就是我希望它显示的方式，无论浏览器窗口的大小如何。 –
所以你想下拉菜单总是适合屏幕？ –