在较小尺寸的窗口中阻止div向侧滚动。溢出：隐藏，包装div和固定位置不起作用

时间：2017-09-29 17:39:02

标签： html css overlap

我正在摆弄一个不是由我创建的网站。最重要的是，我没有在很长一段时间内用HTML / CSS编码。如果窗口小于身体的宽度，我的问题是侧边菜单（div＆＃39; s）水平重叠在div上。我只想防止这种情况发生并继续垂直滚动。

问题在于，在页面div的菜单＆＃34; /侧面有很多div，当鼠标悬停它时会有一些奇特的东西。对于像我这样的新手来说，当浏览器窗口小于内容时，是否有一个干净，简单的方法来防止水平滚动？我已经尝试包装整个身体内容，并将所有相关的div设置为position：fixed，但它不起作用。我可以实现任何简单的提示来解决这个问题吗？

编辑2：我想保留滚动条，滚动时我不想让div移动。

编辑：发布整个代码，大部分内容对于这个问题都没用，但由于我不知道什么可能有用，我发布了所有内容。问题是＆＃34;小组＆＃34;滑过＆＃34;条目＆＃34;如果屏幕尺寸减小了。

＆＃13;
＆＃13; 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<meta name="color:Background" content="#ffffff"/>
<meta name="color:text" content="#838282"/>
<meta name="color:link" content="#b8b8b8"/>
<meta name="color:link hover" content="#b8b8b8"/>
<meta name="color:title" content="#b8b8b8"/>
<meta name="color:sidelinks" content="#b8b8b8"/>
<meta name="color:sidelinks hover" content="#8b8b8"/>
<meta name="color:panel" content="#b8b8b8"/>

<meta name="image:background" content=""/>
<meta name="image:sidebar image" content=""/>
<meta name="image:sidebar background" content=""/>
<meta name="image:panel" content=""/>

<meta name="text:Custom Link One" content="" />
<meta name="text:Custom Link One Title" content="" />
<meta name="text:Custom Link Two" content="" />
<meta name="text:Custom Link Two Title" content="" />
<meta name="text:Custom Link Three" content="" />
<meta name="text:Custom Link Three Title" content="" />


<meta name="color:scroll" content= />

<meta name="color:scrollbg" content= />

<meta name="if:Webkit Scrollbar" content="1" />

<style type="text/css">


a {color:;text-decoration:none;-webkit-transition: all 0.7s ease-out;-moz-transition: all 0.7s ease-out;transition: all 0.7s ease-out;}

.fufu {width:227px;-webkit-transition: all 0.7s ease-out;-moz-transition: all 0.7s ease-out;transition: all 0.7s ease-out;}

.fufu:hover {-webkit-transform: translate(1em,0);-moz-transform: translate(1em,0);-o-transform: translate(1em,0);}


html{
    display:table;
    margin:auto;
}

body {
    background: {color:Background} url("{image:Background}") no-repeat;
    margin:auto;
    color:{color:text};
    font-family: 'News Cycle', sans-serif;
    font-size:11px;
    line-height:100%;
    letter-spacing:1px;
    vertical-align:middle;
}

a {
    text-decoration:none;
    outline:none;
    -moz-outline-style:none;
    color:{color:link};
}


a{
    text-decoration:none;
    color:{color:link};
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    }

a:hover {
    color:{color:link hover};
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    }

img {
    border:none;
}

blockquote {
    padding-left:5px;
    border-left:2px solid;
}
    
blockquote blockquote {
    padding-left:5px;
    border-left:2px solid;
}

h1 {
    font-size:15px;
}


#top_div{
    display: block;
    background-color: #d8d8d8;
    margin-left:auto;
    margin-right: auto;
    margin-bottom:0px;
    z-index:11;
    background-image: url("blah");
}
#top_menu{
    display: block;
    background-color: #d8d8d8;
    margin-left:auto;
    margin-right: auto;
    margin-bottom:0px;
    margin-top:300px;
    float:left;
    z-index:10;
    background-image: url("");
}

#entries {
    padding:0px;
    width:530px;
    margin-left:470px;
    margin-top:20px;
    overflow:hidden;
    font-weight:normal;
    z-index=1;
  
}

    
#post {
    width:500px;
    padding-top:0px;
    padding-left:0px;
    padding-right:0px;
    padding-bottom:15px;
    margin-bottom:0px;
    margin-left:0px;
    border-top: solid 11px #7e0925; 
    overflow:hidden;
    
   
}


#title {
    opacity:0;
    width:220px;
    position:fixed;
    margin-top:90px;
    margin-left:-100px;
    font-size:15px;
    font-family: 'Vivaldi';
    font-weight: bold;
    text-align:center;
    padding-bottom:0px;
    color:{color:title};
    line-height:100%;
    z-index:20;
    transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
}


#panel:hover #title{
    text-shadow: 1px 1px 1px #9a9a9a;
    opacity:1;
    width:270px;
    position:fixed;
    margin-top:-30px;
    margin-left:-120px;
    font-size:25px;
    font-family: 'Vivaldi';
    font-weight: bold;
    text-align:center;
    padding-bottom:0px;
    color:{color:title};
    z-index:0;
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;  
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}
  

#sidebar {
    width:216px;
    height:250px;
    position:fixed;
    margin-left:5px;
    margin-top:50px;
    text-align:center;
    font-size:11px;
    line-height:110%;
    font-family: 'Voltaire', sans-serif;
    z-index:1;
}

#panel{
    float:left;
    position:fixed;
    display:block;
    margin-top:25px;
    margin-left:0px;
    margin-right:0px;
    padding-left:0px;
    width:222px;
    height:762px;
    background:{color:panel} url("{image:panel}") no-repeat;
    z-index:1;
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;  
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}

#panel:hover{
    position:fixed;
    margin-top:12px;
    margin-left:0px;
    padding-left:0px;
    width:222px;
    height:762px;
    z-index:10;
    background: {color:panel}:
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;  
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}

#panel:hover #sidebarimage{
    position:fixed;
    width: 200px;
    margin-left:5px;
    margin-top:0px;
    opacity:0;
    padding:0px;
    z-index:3;
    border: solid 1px #fff; 
    outline: solid 2px #D8D8D8; 
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;  
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}

#panelbackground{
    opacity:0;
    position:fixed;
    margin-top:0px;
    margin-left:-178px;
    width:222px;
    height:762px;
    background:url("{image:panel}") no-repeat;
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;  
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-delay: .1s;
    -moz-transition-delay: .1s; 
    -webkit-transition-delay: .1s; 
    -o-transition-delay: .1s; 
}

#panel:hover #panelbackground{
    opacity:1;
    position:fixed;
    margin-top:0px;
    margin-left:-178px;
    width:222px;
    height:762px;
    background:url("{image:panel}") no-repeat;
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;  
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}

#sidebarimage {
    width: 200px;
    height:200px;
    margin-left:5px;
    margin-top:-38px;
    padding-bottom:0px;
    opacity:1;
    z-index:3;
    border: solid 1px #fff; 
    outline: solid 0px #D8D8D8; 
   transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;  
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}

#sidebarimage img {
    width:200px; 
     transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;  
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}

.top{
    position:fixed;
    opacity:1;
    margin-top:270px;
    margin-left:190px;
    width:50px;
    height:50px;
    border-radius:10px;
    position:absolute;
    z-index: -5; 
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;  
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}

#navigation{
    position:fixed;
    font-family: 'News Cycle', sans-serif;
    font-size:8px;
    margin-left:-70px;
    text-align:center;
    padding:2px;
    margin-top:-55px;
    width:40px;
    border:none;
}

#navigation:hover{
    position:fixed;
    margin-left: -70px;
}

div.button{
    width: 85px;
}


div.button a{
    margin-top:0px;
    text-align: center;
    padding-top:8px;
    padding-bottom:0px;
    padding-left:0px;
    padding-right:0px;
    color: #fff;
    position:relative;
    background:none;
    z-index:2;
    width: 85px;
    height:25px;
    border-style:none;
    border-right:solid 10px;
    border-right-color: rgba(110,110,110,0.4);
    border-bottom:solid 1px {color:background};
    border-bottom-color:;
    display: inline-block;
    text-transform:uppercase;
    transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
}

div.button a:hover{
    text-align: center;
    padding-top:8px;
    padding-bottom:3px;
    padding-left:10px;
    padding-right:10px;
    color: {color:sidelinks hover};
    position:relative;
    background: rgba(0, 0, 0, .8);
    z-index:2;
    width: 60px;
    height:25px;
    border-style:none;
    border-right:solid 12px {color:background};
    border-bottom:solid 1px {color:background};
    display: inline-block;
    text-transform:uppercase;
    transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
}
    
#description {
    box-shadow: 1px 1px 1px #2a2a2a;
    opacity:0;
    font-family: 'News Cycle', sans-serif;
    width:165px;
    padding:5px;
    background:{color:background};
    color: #D8D8D8;
    background: rgba(0, 0, 0, .4);
    text-align:center;
    position:fixed;
    margin-top:217px;
    margin-left:-65px;
    line-height:120%;
    font-size:8px;
    letter-spacing:1px;
    text-transform:uppercase;
    line-height: 15px;
    transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    
}
#panel:hover #description {
    opacity:1;
    transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;
    -o-transition-duration: 0.6s
    transition-delay: .2s;
    -moz-transition-delay: .2s; 
    -webkit-transition-delay: .2s; 
    -o-transition-delay: .2s; 
}

#pagination {
    margin-top:0px;
    margin-left:0px;
    font-family:Calibri;
    font-size:10px;
    text-align:center;
    background:none;
    color:{color:link};
    text-transform:uppercase;
    font-style:oblique;
}


#quote{
    padding-top:5px;
    font-family:georgia;
    position:absolute;
    font-size:38px;
    margin-left:-3px;
}

.info{
    padding:2px;
    margin-left:515px;
    margin-top:-10px;
    position:absolute;
    font-size:9px;
    width:80px;
    text-align:left;
    opacity:0;
    background: none;
    transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    word-wrap:break-word;
}

#post:hover .info {
    padding:2px;
    position:absolute;
    font-size:9px;
    width:80px;
    margin-left:512px;
    margin-top:-5px;
    text-align:left;
    opacity:1;
    transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    z-index:3;
    word-wrap:break-word;
}

#post img{
    display: block;
    margin: auto;
}

#post p{
    padding-left:5px;
    padding-right:5px;
    line-height: 18px;
    font-size: 11.5px;
}

ol.notes {
    padding: 0px;
    margin: 25px 0px;
    list-style-type: none;
    border-bottom: solid 1px #ccc;
}

ol.notes li.note {
    border-top: solid 1px #ccc;
    padding: 10px;
}

ol.notes li.note img.avatar {
    vertical-align: -4px;
    margin-right: 10px;
    width: 16px;
    height: 16px;
}

ol.notes li.note span.action {
    font-weight: bold;
}

ol.notes li.note .answer_content {
    font-weight: normal;
}

ol.notes li.note blockquote {
    border-color: #eee;
    padding: 4px 10px;
    margin: 10px 0px 0px 25px;
}

ol.notes li.note blockquote a {
    text-decoration: none;
}

#asker {
    float:left;
    margin-right:5px;
  
}

.bubble {align:right;background: #eee; margin:7px 0px 5px 66px;padding:10px;position: relative;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.bubble p {margin:1px 0px;}
.bubble span {display:block;position:absolute;width:1px;height:1px;font-size: 0;line-height: 1px;left:-10px;top:10px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:10px solid #eee;}

.askborder {float: left;margin: 1px 4px 0 0;padding: 2px; background: #eee}

#audioplayer { 
width:30px;
height:30px;
overflow:hidden;
position:absolute;
margin-top:37px;
margin-bottom:45px;
margin-left:34px;
z-index:2;
opacity:0.5;
transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;  
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
}

#audioplayer:hover { 
    width:30px;
    height:30px;
    overflow:hidden;
    position:absolute;
    margin-top:37px;
    margin-bottom:45px;
    margin-left:34px;
    z-index:2;
    opacity:1;
    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;  
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
}

#albumart2 {
    width:100px;
    height:100px;
    float:left;
    padding-right:5px;
    position:relative;}
 
#albumart2 img {
    width:100px;
    height:100px;
    float:left;
    
}
#albumart {
    width:100px;
    height:100px;
    float:left;
    margin-left:-105px;
    padding-right:5px;
    position:relative;}
 
#albumart img {
    width:100px;
    height:100px;
    float:left;
    
}

.chat{
    background: #ffffff;
    margin: 0; 
    font-size:11px;
    font-family: 'News Cycle', sans-serif;
}

.chat.chat1 {
    margin-left: 0px;
}
.chat .chat1 .chat2 {
    background: # ffffff;
    color:{color:text};
    margin-bottom: 1px; 
    padding: 4px 4px 5px 5px;
    border-style:none;
}

.chat2 {
    background:#D8D8D8;
    color:{color:text};
    margin-bottom: 1px; 
    padding: 4px 4px 5px 5px;
    border-style:none;
}
.chat .chat1 .chat2.even {
    background: #ffffff; 
    color: {color:text};
} 
.chat .chat1 .chat2 span {font-weight: bold;}

#credit {
    margin-top:0px;
    position:fixed;
    width:80px;
    right:0px;
    bottom:3px;
    left:40px
    line-height:5px;
    letter-spacing:0px;
    font:10px trebuchet ms;
    color: {color:text};
    text-transform:uppercase;
    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;  
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
}

#credit:hover{
    margin-top:0px;
    position:fixed;
    width:80px;
    right:0px;
    bottom:9px;
    line-height:5px;
    letter-spacing:0px;
    font:10px trebuchet ms;
    color: {color:text};
    text-transform:uppercase;
    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;  
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
}

#menuTop{
    margin-top: 0px;
    margin-left: 225px;
    display:block;
    float:left;
    
    
}


#top_description{
    background-color: ;
    float: left;
    margin-top: 265px;
    margin-bottom: 10px;
    display:block;
}

#top_description li{
    background-color: ;
    text-shadow: 1px 1px 1px #000;
    display:block;
}

#top_text{
    margin-left: 240px;
    margin-bottom:25px;
    float:left;
    display:block;
    font-size: 13px;
    line-height: 20pt;
    text-align: center;
}


{block:ifWebkitScrollbar}

::-webkit-scrollbar {width: 3px; height:5px; background:{color:scrollbg};}

::-webkit-scrollbar-corner {background:{color:scroll};}

::-webkit-scrollbar-thumb:vertical {background:{color:scroll}; }

::-webkit-scrollbar-thumb:horizontal {background:{color:scroll};}

{/block:ifWebkitScrollbar}



{CustomCSS}</style></head><body>


<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>



<link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'>


<link href='http://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Seaweed+Script' rel='stylesheet' type='text/css'>

<a href=""></a><div id="top_div" style="width: 1200px; height: 300px"></a>
    
    

<div id="top_description" style="width: 1200px; height: 35px">
    <div id="menuTop" style="width: 770px; height: 35px">
        <style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 35px;
    
}

li {
    float: left;
    height: 35px;
    
    
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 12px 14px;
    text-decoration: ;
    font-size: 15px;
    font-family: "Palatino Linotype", palatino, serif;
}

li a:hover {
    background-color:rgba(126,9,37,0.35);
    height: 10px;
    color: #fff;
    
}

li a:after {
    display:block;
    content:'';
    width:100%;
    height:4px;
    background:#7e0925;
    margin-top:7px;
  }
</style>

<ul>
  <li><a href="blah">Who?</a></li>
  <li><a href="blah">Ask</a></li>
  <li><a href="blah">Submit</a></li>
  <li><a href="blah">Original Posts</a></li>
  <li><a href="blah">Disclaimer</a></li>
</ul>
           
    </div>
    
    
</div>


<div id="top_text" style="width: 735px; height: 195px">
    <p>
</>




<div id="panel">
<div id="panelbackground"><img width="400px"<img src="{image:sidebar background}"></div>
<div id="sidebar">


<div class="top"><div id="navigation"><div class="button" style="background-color: rgba(0,0,0,0.3);">
<a href="blah">who am i?</a>
<a href="blah">ask me</a>
<a href="blah">submit</a>
<a href="blah">my posts</a>
<a href="blah">disclaimer</a>

{block:IfCustomLinkOneTitle}<a href="{text:Custom Link One}">{text:Custom Link One Title}</a>{/block:ifCustomLinkOneTitle}

{block:ifCustomLinkTwoTitle}<a href="{text:Custom Link Two}">{text:Custom Link Two Title}</a>{/block:ifCustomLinkTwoTitle}

{block:ifCustomLinkThreeTitle}<a href="{text:Custom Link Three}">{text:Custom Link Three Title}</a>{/block:ifCustomLinkThreeTitle}<div id="pagination">
{block:Pagination}
            {block:NextPage}
                <a href="{NextPage}">Next</a>
            {/block:NextPage}
            {block:PreviousPage}
                <a href="{PreviousPage}">Prev</a>
            {/block:PreviousPage}
        {/block:Pagination}
</div>
</div></div></div>



<div id="title">{Title}</div><link href='http://fonts.googleapis.com/css?family=Anaheim' rel='stylesheet' type='text/css'>



<div id="sidebarimage"><img width="200px"height="200px""<img src="{image:sidebar image}"></div>


<div id="description">{description}</div>





</div>
</div>
</div>



<div id="credit"><a target="blank"href="http://accioloki.tumblr.com"><font color="{color:text}">© accioloki </a></font></div>

<div id="entries">{block:Posts}

<div id="post">



<div class="info">posted {TimeAgo} {block:RebloggedFrom} | <a href="{ReblogParentURL}" title="via"> via </a> | {block:ContentSource}<a href="{SourceURL}" title="©"> © </a>{/block:ContentSource}{/block:RebloggedFrom} | <a href="{Permalink}">
{NoteCount}</a>{block:HasTags}{block:Tags} #<a href="{TagURL}">{Tag}</a>{/block:Tags}{/block:HasTags}</div>


{block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text} 

{block:Photo}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo} 

{block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}

{block:Quote}<div id="quote">“</div>&nbsp;&nbsp;&nbsp;&nbsp;{Quote}<br>
{block:Source}<div align="right">— {Source}</div>{/block:Source}
    {/block:Quote} 

{block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link} 

<div class="chat">
<div class="chat1">
{Block:Lines}
<div class="chat2 {Alt}">
{Block:Label}
<span>{Label}</span>
{/block:Label} 
{Line}</div>
{/block:Lines}
    
</div>
</div>



{block:Audio}
<div id= "audioplayer">{AudioPlayerGrey}</div>
<div id="albumart2"><img src="http://static.tumblr.com/4wyqgof/Dyvm2qmp1/default.jpg"></div>{block:AlbumArt}<div id="albumart"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
<br>{block:Artist}
{Artist}
{/block:Artist}
{block:TrackName}
{TrackName}
{/block:TrackName}
{block:Album}
{Album}
{/block:Album}
{block:Caption}{Caption}{/block:Caption}{/block:Audio} 

{block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video} 

{block:Answer}<img src="{AskerPortraitURL-48}" align="left" class="askborder"><div class="bubble"><span></span>{Asker}: {Question}&nbsp;</div>{Answer}{/block:Answer}


</div>




{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:Posts}</div>

</body></html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

查找“溢出：隐藏;”在谷歌上。这将删除滚动条

相关问题
最新问题