当我扩展我的网站时，我的工具栏出现问题，工具栏上的最后一个选项消失了，我想知道为什么会发生这种情况，而我也在努力工具栏进入我的页脚。
答案 0 :(得分：0)
这非常简单。你的工具栏有position:fixed所以当你的窗口较小而主菜单需要2行时，工具栏会在主菜单下面显示，因此他没有足够的空间和最后一个选项＆＃34;隐藏＆＃34;在窗户下面。
我必须注意，如果屏幕太小，没有解决办法，只能做出重大改变（例如＆＃34;汉堡包＆＃34;手机中的菜单 - http://callmenick.com/lab-demos/10-simple-responsive-navigation/。调整浏览器的大小你会看到效果。）
要解决此问题，您可以使用以下媒体查询：
$(window).scroll(function() {
var st = $(window).scrollTop();
if (st > 100) {
$('#content-table').css('top', 25);
}
else if (st > 50) {
$('#content-table').css('top', 125);
}
else {
$('#content-table').css('top', 'auto');
}
});/*Tags*/
html {
margin: 0;
padding: 0;
}
body{
font-size: 100%;
background: #EBEBEB;
margin: auto;
}
img{
background: black;
width: 10em;
}
index-info-wrapper p{
clear: both;
text-align: center;
}
/*Id's*/
#menu-wrapper{
max-width: 50%;
background: #EBEBEB;
margin-bottom: 1.5em;
margin: 0 auto;
width: 28.75em;
}
#content-table{
width: 9em;
background: #ffffff;
border-style: groove;
border-color: black;
overflow: hidden;
box-shadow: 2px 5px 20px black;
position: fixed;
left:2em;
}
#table-head{
padding-left: .5em;
font-family: 'Nunito', sans-serif;
color: #262626;
}
#table{
padding-left: 1em;
list-style-type:none;
}
#table a{
display:block;
list-style-type: none;
font-family: 'Nunito', sans-serif;
color: #262626;
text-decoration: none;
line-height: 1.5em;
margin-bottom: .5em;
}
#info-wrapper{
max-width: 50%;
background: #ffffff;
margin: 0 auto;
border-style: groove;
border-color: black;
margin-top: 1em;
overflow: hidden;
box-shadow: 2px 5px 20px black;
}
#index-info-wrapper{
max-width: 60%;
background: #fff;
margin: 0 auto;
border-style: groove;
border-color: black;
margin-top: 1em;
overflow: hidden;
padding-left:1%;
padding-right: 1%;
box-shadow: 2px 5px 20px black;
margin-left: 13em;
}
#about-info-wrapper{
max-width: 55%;
background: #fff;
margin: 0 auto;
border-style: groove;
border-color: black;
margin-top: 1em;
overflow: hidden;
padding-left:1%;
padding-right: 1%;
box-shadow: 2px 5px 20px black;
}
#cssmenu ul {
width: 100%;
list-style-type: none;
display: block;
font-size: 20px;
font-weight: bold;
background: #37535F;
font-family: Arial, Helvetica, sans-serif;
border-bottom: 1px solid #353535;
margin-top: 6em;
text-align: center;
padding:0;
}
#cssmenu ul:before {
content: '';
display: block;
}
#cssmenu ul:after {
content: '';
display: table;
clear: both;
}
#cssmenu li {
display: inline-block;
margin: 0;
padding: 0 4px;
}
#cssmenu li a {
display: inline-block;
color: #a3a3a5;
text-decoration: none;
font-weight: bold;
padding: 10px 20px 7px 20px;
border-bottom: 3px solid transparent;
}
#cssmenu li a:hover {
color: #FFFFFF;
border-bottom: 3px solid #00b8fd;
}
#cssmenu li.active a {
display: inline;
border-bottom: 3px solid #00b8fd;
margin: 0;
color: #ffffff;
}
#komp-img{
float: left;
width: 10em;
border-style: groove;
border-color:aqua;
margin: 1%;
}
#komp-txt{
width:97%;
border-style: groove;
border-color: lightblue;
}
#footer-main{
clear:both;
background-color: #37535F;
width: 100%;
text-align: center;
}
#footer-block li{
display: inline-block;
margin: 0 10px;
}
#footer-block ul li a:hover{
color: #FFFFFF;
border-bottom: 3px solid #04F6FF;
}
#footer-block2 li{
display: inline-block;
margin: 0 10px;
}
#footer-block2 ul li a:hover{
color: #FFFFFF;
border-bottom: 3px solid #04F6FF;
}
/*Classes*/
.komp-wrapper{
margin-bottom: 4%;
margin-top: 4%;
margin-left:1%;
}
.komp-p{
margin-left: 1%;
width:98%;
}
.footer-id{
padding-top:5%;
}
.footer-list-title {
font-size: 1.5em;
color: white;
margin-top: 0;
margin-bottom: 0em;
}
.footer-list{
line-height: 1.5em;
list-style: none;
padding: 0;
margin: 0;
}
.footer-list li a{
line-height: 1.5em;
font-size: 1.3em;
list-style: none;
padding-left: 0;
color: #A3A3A5;
text-decoration: none;
}
.btn-sjekk{
-moz-box-shadow: 0px 0px 0px 2px #9fb4f2;
-webkit-box-shadow: 0px 0px 0px 2px #9fb4f2;
box-shadow: 0px 0px 0px 2px #9fb4f2;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #7892c2), color-stop(1, #476e9e));
background:-moz-linear-gradient(top, #7892c2 5%, #476e9e 100%);
background:-webkit-linear-gradient(top, #7892c2 5%, #476e9e 100%);
background:-o-linear-gradient(top, #7892c2 5%, #476e9e 100%);
background:-ms-linear-gradient(top, #7892c2 5%, #476e9e 100%);
background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7892c2', endColorstr='#476e9e',GradientType=0);
background-color:#7892c2;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:1px solid #4e6096;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
padding:5px 10px;
margin: 5px;
text-decoration:none;
text-shadow:0px 1px 0px #283966;
}
.btn-sjekk:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #476e9e), color-stop(1, #7892c2));
background:-moz-linear-gradient(top, #476e9e 5%, #7892c2 100%);
background:-webkit-linear-gradient(top, #476e9e 5%, #7892c2 100%);
background:-o-linear-gradient(top, #476e9e 5%, #7892c2 100%);
background:-ms-linear-gradient(top, #476e9e 5%, #7892c2 100%);
background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#476e9e', endColorstr='#7892c2',GradientType=0);
background-color:#476e9e;
}
.btn-sjekk:active {
position:relative;
top:1px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id='cssmenu'>
<ul>
<li><a href="../html/Index.html"><span>Home</span></a></li>
<li><a href="../html/about.html"><span>About</span></a></li>
<li class="active"><a href="../html/components.html"><span>Components</span></a></li>
<li><a href="../html/budget_pc.html"><span>Budget computer</span></a></li>
<li><a href="../html/gaming_pc.html"><span>Gaming computer</span></a></li>
<li><a href="https://www.komplett.no/"><span>Back to Komplett.no</span></a></li>
</ul>
</div>
</header>
<div id="content-table">
<h2 id="table-head"> Content </h2>
<ul id="table">
<li><a href="#cpu"> CPU</a></li>
<li><a href="#gpu"> GPU</a></li>
<li><a href="#motherboard"> Motherboard</a></li>
<li><a href="#ram"> RAM</a></li>
<li><a href="#psu"> PSU</a></li>
<li><a href="#hdd"> HDD</a></li>
<li><a href="#ssd"> SSD</a></li>
<li><a href="#dvd"> CD/DVD</a></li>
<li><a href="#case">Case</a></li>
<li><a href="#comp"> Compatability</a></li>
<li><a href="#top">Back to the top!</a></li>
</ul>
</div>
<div id="index-info-wrapper">
<h2>
Components
</h2>
<p>
This is the informational page regarding each of the components necessary for your computer to be classified as one. Every component has its own role and each component is necessary for a computer to work as intended. One can argue that the CPU is the most important component due to it being the "brain" of the computer, though we do not believe that one certain component is more important than another is, as you would need them all for a computer to work. Though we will not go into detail about each component, we will add a link to every component if you would need to or wish to read more about said component!
</p>
<br>
<p>
<a name="cpu"></a>
<h3>CPU</h3>
<p>
Stands for central processing unit and is an electronic circuitry that carries out the instructions of a computer program by performing the basic arithmetic, logical, control and input/output operations specified by instructions. This is what makes people argue about the CPU being the brain, as whenever you click on something on the computer, the CPU responds by performing the action.
</p>
<a href="https://en.wikipedia.org/wiki/Central_processing_unit" target="_blank"> Wish to read more?</a>
<br>
<a href="https://www.komplett.no/subcategory/11204" target="_blank"> CPUs available at Komplett</a>
</p>
<br>
<p>
<a name="gpu"></a>
<h3>GPU</h3>
<p>
Stands for graphics processing unit and is a specialized electronic circuit designed to rapidly manipulate and alter memory to accelerate the creation of images in a frame buffer intended for output to a display. What this means is that the GPU sends out pixels from the computer through a cable into your screen making you able to see what you are doing on the computer!
</p>
<a href="https://en.wikipedia.org/wiki/Graphics_processing_unit" target="_blank">Wish to read more?</a>
<br>
<a href="https://www.komplett.no/category/10412" target="_blank"> GPUs available at Komplett</a>
</p>
<br>
<p>
<a name="motherboard"></a>
<h3>Motherboard</h3>
<p>
A motherboard is the main printed circuit board in a computer. It holds and allows communication between many of the crucial electronic components of a system, such as the CPU, RAM and so on. You can think of a motherboard as a form of body. The motherboard stands as a body, and you connect the other components to the body. Much like as humans, where we have a body and we have arms, legs and head connected to our body.
</p>
<a href="https://en.wikipedia.org/wiki/Motherboard" target="_blank"> Wish to read more?</a>
<br>
<a href="https://www.komplett.no/category/10111" target="_blank">Motherboards available at Komplett</a>
</p>
<br>
<p>
<a name="ram"></a>
<h3>RAM</h3>
<p>
Stands for random-access memory and is a form of computer data storage. A RAM device allows data items to be accessed in almost the same amount of time irrespective of the physical location of data inside the memory. What this means is that whenever you open a program, the CPU sends out the action to the RAM device which then allocates memory to allow you to open up the program.
</p>
<a href="https://en.wikipedia.org/wiki/Random-access_memory" target="_blank">Wish to read more?</a>
<br>
<a href="https://www.komplett.no/subcategory/11209" target="_blank"> RAM devices available at Komplett</a>
</p>
<br>
<p>
<a name="psu"></a>
<h3>PSU</h3>
<p>
Stands for Power-Supply unit and is a device which converts mains AC to low-voltage regulated DC power for the internal components of a computer. Nothing to fancy about PSU, you need power for every component in your computer and that is what the PSU delivers. Power!
</p>
<a href="https://en.wikipedia.org/wiki/Power_supply_unit_(computer)" target="_blank">Wish to read more?</a>
<br>
<a href="https://www.komplett.no/category/10456" target="_blank"> PSUs available at Komplett</a>
</p>
<br>
<p>
<a name="hdd"></a>
<h3>HDD</h3>
<p>
Stands for Hard disk drive and is a data-storage device used for storing and retrieving digital information. You can think of the HDD as a container for all your files, programs, photos and more!
</p>
<a href="https://en.wikipedia.org/wiki/Hard_disk_drive" target="_blank">Wish to read more?</a>
<br>
<a href="https://www.komplett.no/category/10088?subcategory=10096_Harddisk%203%2C5%22" target="_blank">HDDs available at Komplett</a>
</p>
<br>
<p>
<a name="ssd"></a>
<h3>SSD</h3>
<p>
Stands for Solid-state drive; is a solid-state storage device that uses integrated circuit assemblies as memory to store data persistently. The SSD is the evolution of HDD. The SSD contains no physical parts, making it easier to access data more quickly than what you would do with a HDD.
</p>
<a href="https://en.wikipedia.org/wiki/Solid-state_drive" target="_blank">Wish to read more?</a>
<br>
<a href="https://www.komplett.no/category/10088?subcategory=11126_SSD%202.5%22" target="_blank">SSDs available at Komplett</a>
</p>
<br>
<p>
<a name="dvd"></a>
<h3>CD/DVD Reader</h3>
<p>
Also known as an optical disc drive(ODD) is a disk drive that uses laser light or electromagnetic waves within or near the visible light spectrum as part of the process of reading or writing data to or from optical discs. Basically this means that anytime you wish to "read" data contained in a disc, an ODD is the way to go.
is not a necessary component for a computer to work properly, more of a useful addon!
</p>
<a href="https://en.wikipedia.org/wiki/Optical_disc_drive" target="_blank">Wish to read more?</a>
<br>
<a href="https://www.komplett.no/category/10028" target="_blank">ODDs available at Komplett</a>
</p>
<br>
<p>
<a name="case"></a>
<h3>Case</h3>
<p>
A case is a form of box designed to hold all components within itself. A case works like a type of house. Though it is not necessary to build a computer within a case, it is highly recommended as a case can come with many features. Fans being the most important one of them. The bigger the case, the more features you will get out of it. A case is highly recommended for new beginners!
</p>
<a href="https://en.wikipedia.org/wiki/Computer_case" target="_blank">Wish to read more?</a>
<br>
<a href="https://www.komplett.no/category/10149" target="_blank">Cases available on Komplett</a>
</p>
<br>
<p>
<a name="comp"></a>
<h3>Compatability</h3>
<p>
The most important thing about building a computer is to choose the correct components and understand the compatibility between them. Certain components require that another component can support that need. Lucky for you, you have us to help you through the compatability issues and we will list all components that require compatability.
</p>
<br>
<h4>CPU and Motherboard:</h4>
<p>
Every CPU that exists have something called a socket-type. Think of socket-type as the size of the CPU. The slot which the CPU is put in is located in the motherboard. What this means is that the motherboard is required to have a big enough spot for said CPU to fit in. Take forexample an Intel Processor with an LGA1150-socket. For this particular CPU you would need a motherboard that has the same LGA1150 socket-type.
you guys a better example of what we mean, check out the bundles Komplett offers which include a compatible set of CPU's and Motherboards.
</p>
<a href="https://www.komplett.no/category/10293" target="_blank">Bundles available at Komplett</a>
<br>
<h4>RAM and Motherboard:</h4>
<p>
Compatability between RAM and a Motherboard is something you rarely have to think about. The only time RAM devices will have an issue with motherboards are when newer editions are released. For example, now recently a newer generation of RAM devices were released. Technology within RAMs got upgraded from DDR3 to DDR4. These are just fancy tech-words that have no meaning for you, look at it like upgrading from an iPhone 5 to iPhone 6. With newer generations of RAM, they require a newer generation of motherboards. DDR3 does not have any compatibility issues with any motherboard sold at Komplett. DDR4 however requires that you have a motherboard model of over 100x. You can find these motherboards <a href="https://www.komplett.no/category/10111?cnet=Produktformfaktor_A00046%20%20%C2%A7ATX&cnet=Brikkesett%20type_A00050%20%20%C2%A7Intel%20Z170%20Express" target="_blank">here</a>.
</p>
<br>
<h4>PSU and your other components</h4>
<p>
As explained earlier the PSU delivers power to each component. Note that the PSU has a max limit over how much voltage it can deliver. The voltage a PSU can give out varies from 400 to over 1000 voltage. The component that uses the most power is the GPU. The GPU has the hardest job of all components, which is sending pixels to your screen. The GPU alone can soak about 500-600 watts (this varies of course from GPU to GPU) and that is one component alone. So always make sure you have enough voltage in your PSU!
</p>
<a href="https://www.komplett.no/category/10456" target="_blank"> PSUs available at Komplett!</a>
</p>
</div>
<footer class="footer-id">
<div id="footer-main">
<h3 class="footer-list-title">Content</h3>
<div id="footer-block">
<ul class="footer-list">
<li class="footer-list-item">
<a href="../html/Index.html">Home</a>
</li>
<li class="footer-list-item">
<a href="#">About</a>
</li>
<li class="footer-list-item">
<a href="#">Application</a>
</li>
</ul>
</div>
<div id="footer-block2">
<ul class="footer-list">
<li class="footer-list-item">
<a href="#">Contact</a>
</li>
<li class="footer-list-item">
<a href="#">Log in</a>
</li>
</ul>
</div>
</div>
</footer>