#buttons，而非#latest。对不起！我有#buttons div和latest.js似乎有冲突。我尝试使用overflow: auto，overflow: initial和overflow: hidden来修复它，而overflow: auto;似乎正在做我想要的事情，除了它增加了另一个事实滚动条，以便它仍然可以伸展到侧边栏。我需要它留在侧边栏区域，并向下滚动1＆＃34; side＆＃34;滚动条，如果它必须伸展到侧边栏的底部。我将包含CSS，HTML，JavaScript以及codepen来处理它。
html, body {
margin: 0;
padding: 0;
}
.hidden {
display: none;
}
body {
background: url(http://www.thegaminghideout.com/pog/VexIMG/bg.png);
background-color: black;
background-size: 100%;
background-repeat: no-repeat;
font-size: 12px;
color: #666666;
}
@font-face {
font-family: 'karmatic_arcaderegular';
src: url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.eot');
src: url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.woff2') format('woff2'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.woff') format('woff'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.ttf') format('truetype'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.svg#karmatic_arcaderegular') format('svg');
font-weight: normal;
font-style: normal;
}
p, h1, h2, h3, h4, h5, h6, caption, text, font, li, ul {
color: white;
}
#wrap {
position: relative;
width: 760px;
margin: auto;
overflow: hidden;
}
#header {
height: 60px;
width: auto;
background: #db6d16
url(VexIMG/header.png);
}
#navigation {
width: 760px;
height: 35px;
position: absolute;
border-bottom: 2px solid #000000;
background: red;
padding: 0px;
}
#navigation .padding {
padding: 2px;
}
#navigation .navlinks {
position: absolute;
top: 1px; left: 0px;
}
#navigation .navlinks ul {
margin: 0px;
padding: 0px;
text-align: center;
list-style-type: none;
width: 760px;
height: 35px;
}
#navigation .navlinks li {
position: relative;
top: 5px;
margin: 0px 5px 0px 5px;
list-style-type: none;
display: inline;
}
#navigation .navlinks li a {
color: #000000;
padding: 5px 0px 9px 0px;
text-decoration: none;
font-size: 18px;
font-family: karmatic_arcaderegular;
padding: 5px 0px 9px 0px;
}
#navigation .navlinks li a:hover {
margin: 0px;
color: #ffffff;
background: red;
text-decoration: underline;
}
#buttons {
position: absolute;
right: 0px;
top: 113px;
bottom: 96px;
width: 155px;
overflow: auto;
border-left: 2px solid #FFA500;
border-right: 2px solid #FFA500;
font-family: Terminal, Arial, Times New Roman;
background: -webkit-linear-gradient(#700000, #250000);
background: -o-linear-gradient(#700000, #250000);
background: -moz-linear-gradient(#700000, #250000);
background: linear-gradient(#700000, #250000);
}
#latest {
overflow: auto;
border: 1px ridge #FFA500;
width: 297px;
height: 195px;
}
#latest p {
font-family: Times New Roman;
}
#static_video {
float: right;
width: 295px;
height: 200px;
background: -webkit-linear-gradient(#000000, #252525, #000000);
background: -o-linear-gradient(#000000, #252525, #000000);
background: -moz-linear-gradient(#000000, #252525, #000000);
background: linear-gradient(#000000, #252525, #000000);
clear: left;
}
#body {
padding-top: 60px;
width: 600px;
font-family: Arial, Verdana, Terminal;
font-size: 14px;
}
#body a {
color: red;
}
#body a:hover {
color: lime;
}
#body .secret img {
width: 150px;
height: 100px;
border: 2px solid black;
}
#body .game {
padding: 3px 3px 10px 3px;
}
#body .game img {
align: center;
float: left;
width: 175px;
height: 101px;
border: 2px ridge #ff0000;
}
#body .game caption {
padding-left: 1px;
}
#body .space {
padding-top: 10px;
padding-bottom: 10px;
border-top: 4px ridge red;
border-bottom: 4px ridge red;
}
#body .game caption {
margin-top: 2px;
float: right;
font-family: Terminal, Arial, Verdana, San-Serif;
font-size: 12px;
color: #000000;
border-bottom: 2px dashed #e9e9e9;
}
#body .game a {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: #c9c9c9;
text-decoration: none;
}
#body .game a:hover {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: red;
text-decoration: underline;
}
#footer {
clear: both;
width: 730px;
height: 60px;
font-family: Tahoma, Arial, Terminal, San-Serif;
font-size: 10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
}
#footer li {
padding: 0px 2px 0px 2px;
float: right;
display: inline;
text-align: left;
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size:; 10px;
}
#footer a {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: #c9c9c9;
text-decoration: none;
}
#footer a:hover {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: red;
text-decoration: underline;
}
#footer #footnav {
display: inline;
width: 310px;
float: right;
text-align: left;
position: relative;
bottom: 65px;
}
<html>
<head>
<title>Games - TGH</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="favicon.ico">
<!-- This Template is a WiP - Please report any bugs to the administrative team at The Gaming Hideout. Thank you. All rights reserved. -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-55096101-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<?php include_once("analyticstracking.php") ?>
<div id="wrap">
<div id="header">
<h1><img src="VexIMG/header.png" alt="The Gaming Hideout" width="760" height="60"></h1>
</div>
<div id="navigation">
<div class="navlinks">
<div id="output2">
</div>
</div>
<script src="nav.js"></script>
</div>
<div id="buttons">
<center>
<a href="http://www.youtube.com/subscription_center?add_user=JackSepticEye"><img src="http://www.thegaminghideout.com/pog/VexIMG/subscribe.png"></a>
</center>
<br>
</center>
<p>
Subscribe to the Boss, JackSepticEye's Youtube Channel!
</p>
<div id="latest">
<center>
<p id="output1"></p>
<script src="latest.js"></script></center>
</div>
</div>
<div id="body">
<div class="space">
</div>
<!--Tons of games listed which can be viewed on the `codepen` -->
</div>
<div class="space">
</div>
</div>
<div id="footer">
<div id="copyright">
Copyright © The Gaming Hideout<br>
We own no rights on any game on this site unless otherwise noted.<br>
All Rights Reserved.
</div>
<div id="footnav">
<ul>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="gamingreviews.html">The Hideout</a></li>
<li><a href="games.html">Games</a></li>
<li><a href="chat.html">Chat</a></li>
<li><a href="index.html">About</a></li>
</ul>
</div>
</div>
var out = document.getElementById("output2");
var args = ["index", "application", "forum" ];
function displayMenu() {
var ul = document.createElement('ul');
ul.className = "mainMenu";
args.forEach(function (name, index) {
var li = document.createElement('li'),
an = document.createElement('a');
li.className = "mmenu-item-" + index;
li.setAttribute = "link rel", "stylesheet", "type", "text/css", "href", "http://www.thegaminghideout.com/pog/style.css";
an.innerHTML = name;
an.setAttribute('href', "http://www.thegaminghideout.com/pog/" + name + ".html");
li.appendChild(an);
ul.appendChild(li);
});
out.appendChild(ul);
}
displayMenu();
function showVideo(response) {
if(response.data && response.data.items) {
var items = response.data.items;
if(items.length>0) {
var item = items[0];
var videoid = "http://www.youtube.com/embed/"+item.id;
console.log("Latest ID: '"+videoid+"'");
var video = "<iframe width='420' height='315' src='"+videoid+"' frameborder='0' allowfullscreen></iframe>";
$('#latestvideo').html(video);
}
}
}
window.onload = function() {
var i;
var document=window.document;
var out = document.getElementById("output1");
var args = ["Sunday, November 2nd, 2014", "We are looking for new staff members! Apply at the applications page for more information!", "There is a new MOTD under construction, so please report any bugs to the staff!"];
function displayArgs() {
"use strict";
for (i = 0; i < args.length; i++) {
out.appendChild(document.createTextNode(args[i]));
out.appendChild(document.createElement("br"));
out.appendChild(document.createElement("br"));
}
}
displayArgs(args);
};
var out = document.getElementById("footnav");
var args = ["index"];
function displayMenu() {
var ul = document.createElement('ul');
ul.className = "mainMenu";
args.forEach(function(name, index) {
var li = document.createElement('li'),
an = document.createElement('a');
li.className = "mmenu-item-" + index;
li.setAttribute = "link rel", "stylesheet", "type", "text/css", "href", "http://www.thegaminghideout.com/pog/style.css";
an.innerHTML = name;
an.setAttribute('href', "http://www.thegaminghideout.com/pog/" + name + ".html");
li.appendChild(an);
ul.appendChild(li);
});
out.appendChild(ul);
}
displayMenu();
答案 0 :(得分：0)
如果我做得对，你只需要从#latest div中删除宽度，滚动就会消失