我希望我的#OthersMain有一个可见的溢出但是无法让它工作

时间:2017-05-03 13:37:09

标签: css html5 css3

OthersMain正在显示溢出:隐藏;我需要它溢出:可见; 有帮助吗?

body, html {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}
* {
	box-sizing: border-box;
}

/* Home.html */

#LeftMainSection {
	background-color:#FFA500;
	width: 180px;
	height: 100%;
	display: inline-block;
	float: left;
	margin-left: -180px;
	animation: LeftMove 1s;
	animation-fill-mode: forwards;
    border-right:10px solid black;
}
#LeftMainSection a {
	padding-top: 9px;
	text-align: center;
	text-decoration: none;
	color: black;
	background-color:rgba(153, 99, 0, .6);
	width: 180px;
	height: auto;
    padding:10px;
	display: block;
    border-bottom:10px solid black;
    border-right:10px solid black;
}


@keyframes LeftMove {
	0% {
		margin-left: -180px;
	}
	100% {
		margin-left: 0;
	}
}
#BorderBottomBlack {
	border-bottom: 10px solid black;
}
#BorderTopBlack {
	border-top: 10px solid black;
}
#RandomInfo {
	text-align: center;
}
#HomeMain, #OthersMain{
        text-align:center;
	overflow: visible;
	text-indent: 40px;
	color: white;
	height: 100%;
	background-color:#664200;
	margin-right: 245px;
	margin-left: -180px;
	animation: LeftMove 1s;
	animation-fill-mode: forwards;
}

#OthersMain{
 font-size:.8em;
    overflow:visible !important;
}
#TopHR, #BottomHR{
    border:solid black;
 height:10px;
    background-color:black;
}
#HomeMain p{
    font-size:1.3em;
    text-align:center;
	padding: 10px;
}
#AboutPG{
    font-size:1.3em;
 text-align:left;
    padding: 10px;
}
#Flip {
 transform:rotateY(180deg);
}
#RightMainSection {
	border-top: 10px solid black;
	position: absolute;
	right: 0;
	top: 0;
    background-color:#FFA500;
	width: 250px;
	height: 100%;
	display: inline-block;
	float: right;
}
#News1, #News2, #News3, #News4 {
	background-color:#C27D00;
    border-left:10px solid black;
    border-bottom:10px solid black;
	height: 140px;
	width: 250px;
    
}
#itm1, #itm2, #itm3, #itm4{
    text-align:center;
 width:100%;
    height:121px;
    background-color:black;
    margin:0;
    padding:0;
}
#ShopLink1, #ShopLink2, #ShopLink3, #ShopLink4{
    text-align:center;
    color:white;
    display:inline-block;
    background-color:black;
}
#News4{
 height:150px;   
}
#News2 h1, #News3 h1, #News4 h1 {
    margin:0;
    padding:0;
 font-size:.89em;
}

#News2, #News3, #News4 {
    font-size:1.1em;
 text-align:center;
}
#myProgress {
	width: 100%;
	background-color: #000;
}
#myBar {
	font-size: 10pt;
	width: 40%;
	height: 30px;
	background-color: #4CAF50;
	text-align: center;
	line-height: 30px;
	color: white;
}
#Percent, #pollsP {
	text-align: center;
	margin: 0;
	padding: 0;
}
button {
	position: absolute;
	width: 100%;
	top: 112px;
}

#tezt{
 width:50%;
    height:10px;
}
#HomeMainDivTop {
	border-top: 10px solid black;
	width: 100%;
	height: 90px;
	background-color:#C27D00;
    border-bottom:10px solid black;
	text-align: center;
}
#Flip{
    margin-left:10px;
}
#LeftMain, #RightMain{
 height:100%;
    width:100%;
}

#CatImg2{
      margin-right:10px;  
}
/* index.html */


#Indexh1{
    text-align:center;
 width:auto;
    height:50px;
}
#IndexA {
    display:inline-block;
 width:100%;
    height:100px;
    text-decoration:none;
    color:gray;
}
video {
    background-color:black;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}


#ClickToHome{
    z-index:99;
    background:rgba(50, 50, 50, .5);
 width:100%;
    height:100px;
    position:absolute;
    top:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/Candidate/CSSFiles/styles.css">
</head>

<body>
    <div id="LeftMainSection">
        <a id="BorderTopBlack" href="Index.html">Video</a>
        <a id="" href="Home.html">Home</a>
        <a id="" href="Bio.html">Bio</a>
        <a id="" href="Shop.html">Shop</a>
        <a id="" href="Campaign.html">About The Campaign</a>
        <a id="Others" href="Others.html">About The Other Candidates</a>
        <a id="" href="citations.html">Citations</a>
        <a id="BorderBottomBlack" href="Contact.html">Contact</a>
        <div id="RandomInfo">
            <h3>Random Info</h3> 
        </div>
    </div>
    <main id="OthersMain">
        <div id="HomeMainDivTop">
            <h2>About The Other Canidates</h2>
        </div>
        
        <div>

            <h1>Burton (Gus) Guster</h1>
            <hr id="">
            <h2 id="AboutPG">About "Gus"</h2>
            <p>Crime</p>
            <p></p>
            <p>Economy</p>
            <p></p>
            <p>Education</p>
            <p></p>
        
        </div>
        <div>
            <hr id="TopHR">
            <h1>Rickey</h1>
            <hr>
            <h2 id="AboutPG">About "Rickey"</h2>
            <p>Crime</p>
            <p></p>
            <p>Economy</p>
            <p></p>
            <p>Education</p>
            <p></p>
        
        </div>
        <div>
            <hr id="TopHR">
            <h1>Rick Grimes</h1>
            <hr>
            <h2 id="AboutPG">About "Rick Grimes"</h2>
            <p>Crime</p>
            <p></p>
            <p>Economy</p>
            <p></p>
            <p>Education</p>
            <p>sdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ih iuh uih iuh uih iu hui hiu </p>
        </div>
    </main>
    
    <div id="RightMainSection">
        <div id="News2"><h1>Campaign News</h1>This just in Burton Guster, Ricky, and Rick Grimes are found to be lying in the campaign just to get ahead in the polls that Puss In Boots swept away from them.</div>
        
        <div id="News3"><h1>World News</h1>Today in America Donald Trump is talking about visiting kim jong-un with Puss in Boots by his side.</div>
        
        <div id="News4"><h1>Local News</h1>Tomorrow Puss In Boots is planning to meet with local schools to find out what kids like most about school. And what teachers want to see changed for the childrens education.</div>
    </div>
</body>
</html>

我希望我的Main能够使用#OthersMain的id来获得可见的溢出

我试过使用!重要添加到我的CSS样式但仍然无法调试什么阻止它可见

1 个答案:

答案 0 :(得分:0)

您应该放置:overflow: scrollauto不可见,它也可以在没有!important的情况下使用

&#13;
&#13;
body, html {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}
* {
	box-sizing: border-box;
}

/* Home.html */

#LeftMainSection {
	background-color:#FFA500;
	width: 180px;
	height: 100%;
	display: inline-block;
	float: left;
	margin-left: -180px;
	animation: LeftMove 1s;
	animation-fill-mode: forwards;
    border-right:10px solid black;
}
#LeftMainSection a {
	padding-top: 9px;
	text-align: center;
	text-decoration: none;
	color: black;
	background-color:rgba(153, 99, 0, .6);
	width: 180px;
	height: auto;
    padding:10px;
	display: block;
    border-bottom:10px solid black;
    border-right:10px solid black;
}


@keyframes LeftMove {
	0% {
		margin-left: -180px;
	}
	100% {
		margin-left: 0;
	}
}
#BorderBottomBlack {
	border-bottom: 10px solid black;
}
#BorderTopBlack {
	border-top: 10px solid black;
}
#RandomInfo {
	text-align: center;
}
#HomeMain, #OthersMain{
        text-align:center;
	overflow: auto;
	text-indent: 40px;
	color: white;
	height: 100%;
	background-color:#664200;
	margin-right: 245px;
	margin-left: -180px;
	animation: LeftMove 1s;
	animation-fill-mode: forwards;
}

#OthersMain{
 font-size:.8em;
    overflow:auto;
}
#TopHR, #BottomHR{
    border:solid black;
 height:10px;
    background-color:black;
}
#HomeMain p{
    font-size:1.3em;
    text-align:center;
	padding: 10px;
}
#AboutPG{
    font-size:1.3em;
 text-align:left;
    padding: 10px;
}
#Flip {
 transform:rotateY(180deg);
}
#RightMainSection {
	border-top: 10px solid black;
	position: absolute;
	right: 0;
	top: 0;
    background-color:#FFA500;
	width: 250px;
	height: 100%;
	display: inline-block;
	float: right;
}
#News1, #News2, #News3, #News4 {
	background-color:#C27D00;
    border-left:10px solid black;
    border-bottom:10px solid black;
	height: 140px;
	width: 250px;
    
}
#itm1, #itm2, #itm3, #itm4{
    text-align:center;
 width:100%;
    height:121px;
    background-color:black;
    margin:0;
    padding:0;
}
#ShopLink1, #ShopLink2, #ShopLink3, #ShopLink4{
    text-align:center;
    color:white;
    display:inline-block;
    background-color:black;
}
#News4{
 height:150px;   
}
#News2 h1, #News3 h1, #News4 h1 {
    margin:0;
    padding:0;
 font-size:.89em;
}

#News2, #News3, #News4 {
    font-size:1.1em;
 text-align:center;
}
#myProgress {
	width: 100%;
	background-color: #000;
}
#myBar {
	font-size: 10pt;
	width: 40%;
	height: 30px;
	background-color: #4CAF50;
	text-align: center;
	line-height: 30px;
	color: white;
}
#Percent, #pollsP {
	text-align: center;
	margin: 0;
	padding: 0;
}
button {
	position: absolute;
	width: 100%;
	top: 112px;
}

#tezt{
 width:50%;
    height:10px;
}
#HomeMainDivTop {
	border-top: 10px solid black;
	width: 100%;
	height: 90px;
	background-color:#C27D00;
    border-bottom:10px solid black;
	text-align: center;
}
#Flip{
    margin-left:10px;
}
#LeftMain, #RightMain{
 height:100%;
    width:100%;
}

#CatImg2{
      margin-right:10px;  
}
/* index.html */


#Indexh1{
    text-align:center;
 width:auto;
    height:50px;
}
#IndexA {
    display:inline-block;
 width:100%;
    height:100px;
    text-decoration:none;
    color:gray;
}
video {
    background-color:black;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}


#ClickToHome{
    z-index:99;
    background:rgba(50, 50, 50, .5);
 width:100%;
    height:100px;
    position:absolute;
    top:0;
}
&#13;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/Candidate/CSSFiles/styles.css">
</head>

<body>
    <div id="LeftMainSection">
        <a id="BorderTopBlack" href="Index.html">Video</a>
        <a id="" href="Home.html">Home</a>
        <a id="" href="Bio.html">Bio</a>
        <a id="" href="Shop.html">Shop</a>
        <a id="" href="Campaign.html">About The Campaign</a>
        <a id="Others" href="Others.html">About The Other Candidates</a>
        <a id="" href="citations.html">Citations</a>
        <a id="BorderBottomBlack" href="Contact.html">Contact</a>
        <div id="RandomInfo">
            <h3>Random Info</h3> 
        </div>
    </div>
    <main id="OthersMain">
        <div id="HomeMainDivTop">
            <h2>About The Other Canidates</h2>
        </div>
        
        <div>

            <h1>Burton (Gus) Guster</h1>
            <hr id="">
            <h2 id="AboutPG">About "Gus"</h2>
            <p>Crime</p>
            <p></p>
            <p>Economy</p>
            <p></p>
            <p>Education</p>
            <p></p>
        
        </div>
        <div>
            <hr id="TopHR">
            <h1>Rickey</h1>
            <hr>
            <h2 id="AboutPG">About "Rickey"</h2>
            <p>Crime</p>
            <p></p>
            <p>Economy</p>
            <p></p>
            <p>Education</p>
            <p></p>
        
        </div>
        <div>
            <hr id="TopHR">
            <h1>Rick Grimes</h1>
            <hr>
            <h2 id="AboutPG">About "Rick Grimes"</h2>
            <p>Crime</p>
            <p></p>
            <p>Economy</p>
            <p></p>
            <p>Education</p>
            <p>sdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd   ih uh uhu ih uihu hui hui hui hui hu ih iuh uih iuh uih iu hui hiu </p>
        </div>
    </main>
    
    <div id="RightMainSection">
        <div id="News2"><h1>Campaign News</h1>This just in Burton Guster, Ricky, and Rick Grimes are found to be lying in the campaign just to get ahead in the polls that Puss In Boots swept away from them.</div>
        
        <div id="News3"><h1>World News</h1>Today in America Donald Trump is talking about visiting kim jong-un with Puss in Boots by his side.</div>
        
        <div id="News4"><h1>Local News</h1>Tomorrow Puss In Boots is planning to meet with local schools to find out what kids like most about school. And what teachers want to see changed for the childrens education.</div>
    </div>
</body>
</html>
&#13;
&#13;
&#13;