0
我有一点麻烦溢出：隐藏给予高度的容器....溢出隐藏需要容器使得出现滚动条
所以....如果你在这里看到：https://jsfiddle.net/8xxcm7vw/1/
HTML：
<body>
<div class="wrapperOrg">
<div class="alignedLeft col-md-19 col-sm-20 col-xs-24">
<nav id="topNavigation" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href=""><span>Manufracturer<span> </span>Approved</span></a>
</li>
<li>
<a href=""><span>Customer 1st<span> </span>We'll visit you</span></a>
</li>
<li>
<a href=""><span>Excess<span> </span>SAFE</span></a>
</li>
<li>
<a href=""><span>Friendly Form- <span> </span>Free Help</span></a>
</li>
<li>
<a href=""><span>FREE-<span> </span>Accident Management</span></a>
</li>
</ul>
</div>
</div>
</nav>
</div><div id="socialNavigation" class="alignedRight col-md-5 col-sm-4 col-xs-18">
<ul class="nav navbar-nav">
<li>
<a href="#facebook">
<i class="icon icon-facebook"></i>
</a>
</li>
<li>
<a href="#googleplus">
<i class="icon icon-twitter"></i>
</a>
</li>
<li>
<a href="#twitter">
<i class="icon icon-youtube"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="wrapperWh">
<div class="alignedLeft static-top col-md-19 col-sm-20 col-xs-24">
<nav id="mainNavigation" class="navbar navbar-default" navbar-static-top>
<div class="container-fluid">
<div class="alignedLeft col-md-7 col-sm-7 col-xs-7">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand ">
<img src="images/advance_logo.png" alt=""/>
</div>
</div>
</div><div class="alignedRight col-md-17 col-sm-17col-xs-17">
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="nav navbar-nav">
<li>
<a href="">Home</a>
</li>
<li>
<a href="">Accident<br>Management</a>
<div class="subMainNavigation">
<div class="col-md-5 col-sm-5 col-sx-5">
<img src="images/kitemark.png" alt=""/>
<p>There are many variations of passages. There are many variations of passages of Lorem Ipsum available</p>
</div>
<div class="col-md-9 col-sm-9 col-sx-9">
<ul>
<li><a href="">Download App</a></li>
<li><a href="">Accident Helpline</a></li>
</ul>
</div>
<div class="col-md-10 col-sm-10 col-sx-10"></div>
</div>
</li>
<li>
<a href="">Approved<br>Manufacturers</a>
</li>
<li>
<a href="">Our<br>Services</a>
<div class="subMainNavigation">
<div class="col-md-5 col-sm-5 col-sx-5">
<img src="images/kitemark.png" alt=""/>
<p>There are many variations of passages. There are many variations of passages of Lorem Ipsum available</p>
</div>
<div class="col-md-9 col-sm-9 col-sx-9">
<ul>
<li><a href="">Structural Aluminium Repairs</a></li>
<li><a href="">Free Manufacturer paint/body inspection</a></li>
</ul>
</div>
<div class="col-md-10 col-sm-10 col-sx-10"></div>
</div>
</li>
<li>
<a href="">About<br>Advance</a>
<div class="subMainNavigation">
<div class="col-md-5 col-sm-5 col-sx-5">
<img src="images/kitemark.png" alt=""/>
<p>There are many variations of passages. There are many variations of passages of Lorem Ipsum available</p>
</div>
<div class="col-md-9 col-sm-9 col-sx-9">
<ul>
<li><a href="">Commitment to Quality</a></li>
<li><a href="">Pride and Joy</a></li>
<li><a href="">Meet the team</a></li>
</ul>
</div>
<div class="col-md-10 col-sm-10 col-sx-10"></div>
</div>
</li>
<li>
<a href="">Contact<br>Us</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div><div id="callNavigation" class="alignedRight col-md-5 col-sm-4 col-xs-18">
<a href="phone:">
<i class="icon icon-phone"></i>
<p>
<span>Helpline</span>
<span>01246 858500</span>
</p>
</a>
</div>
<div id="displaySubmenu" class="col-md-24 col-sm-24 col-xs-24"></div>
</div>
<div class="wrapperMain">
<div id="mainContent" class="col-md-24 col-sm-24 col-xs-24">
<div id="owl-main" class="owl-carousel">
<div>
<img src="http://s23.postimg.org/9f5c5mgi3/slider1.jpg" alt="" class="img-responsive"/>
</div>
</div>
<div class="floatingText">
<h3>Advance Accident <span>MANAGEMENT</span></h3>
<span>'We'll take the stress away'</span>
<ul>
<li></i>Available all day, every day</li>
<li>Free replacement vehicle</li>
<li>Free Recovery, delivery a Collection, we'll come to you</li>
<li>We'll liase with your insurance company</li>
<li>Friendly, form-free help</li>
</ul>
<a href="#" class="orangeButton downloadApp"><p>DOWNLOAD</p><span>FREE APP</span></a>
</div>
</div>
</div> <!-- ends wrapperMain-->
</body>
CSS：
.navbar-collapse{
padding:0;
margin:0;
}
.navbar-nav {
width:100%;
float:none;
/*displaying inline block makes a little margin*/
margin-top: 0.1%;
margin-bottom: 0.1%;
}
.navbar-default {
border:none;
margin-bottom: 0;
border-radius:0;
box-shadow:none;
}
.navbar-brand {
padding:0;
}
/*vertical alignment*/
.alignedLeft,
.alignedRight{
display: inline-block;
vertical-align: middle;
height:100%;
padding:0;
float:none;
}
/**Top Navigation**/
.wrapperOrg {
background: #f9540a;
}
#topNavigation {
background: #f9540a;
font-family:'Droid Sans', sans-serif;
font-weight:700;
font-size:1.2em;
}
#topNavigation li {
border-right:2px solid #d93700;
box-shadow: 1.5px -0.5px 0px -0.5px rgba(255, 255, 250, 0.5);
-webkit-box-shadow: 1.5px -0.5px 0px -0.5px rgba(255, 255, 250, 0.5);
-moz-box-shadow: 1.5px -0.5px 0px -0.5px rgba(255, 255, 250, 0.5);
}
#topNavigation li a {
color: #fff;
padding: 3%;
}
#topNavigation .navbar-nav li a:hover {
color: #808080;
}
#topNavigation li a span {
display:block;
}
/*for better responsive*/
#topNavigation li:first-child {
width:21%;
}
#topNavigation li:nth-child(2){
width:19%;
}
#topNavigation li:nth-child(3){
width:13%;
}
#topNavigation li:nth-child(4){
width:20%;
}
#topNavigation li:last-child {
width:27%;
border:none;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
/**Social Navigation**/
#socialNavigation li {
padding:0 1%;
}
#socialNavigation li a {
color: #808080;
text-decoration:none;
padding:0;
}
#socialNavigation li a:hover {
color: #808080;
text-decoration:none;
padding:0;
background: none;
}
#socialNavigation li a i{
font-size:3.5em;
line-height: 1.2;
color: #808080;
background-color: #fff;
border-radius: 50%;
box-shadow: 1px 0px 0px 2px #808080 inset;
}
/**Main Navigation**/
.wrapperWh {
background: #ffffff;
/*relative to displayMenu*/
position:relative;
box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.75)
}
#mainNavigation {
background-color: #ffffff;
font-family:'Droid Sans', sans-serif;
font-weight:700;
font-size:1.2em;
/* relative to the fullSubMainNav*/
position:relative;
}
#mainNavigation .navbar-brand {
height: auto;
padding:0;
}
#mainNavigation ul li {
border-right:2px solid red;
padding:0 2%;
}
#mainNavigation ul li a {
color:black;
padding:0;
}
/*for better responsive*/
#mainNavigation li:first-child {
width:12%;
}
#mainNavigation li:nth-child(2){
width:20%;
}
#mainNavigation li:nth-child(3){
width:22%;
}
#mainNavigation li:nth-child(4),
#mainNavigation li:nth-child(5){
width:15%;
}
#mainNavigation li:last-child {
width:16%;
border:none;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
/*full subnavigation for mainNavigation*/
#fullSubMainNav {
width:100%;
/* absolute to mainNavigation*/
border:1px solid blue;
height:50px;
}
/*subnavigation for mainNavigation on hover*/
.activeNav {
display:block;
}
.subMainNavigation {
display:none;
}
/*we are styling the subMainNavigation*/
#displaySubmenu ul{
font-family: "Droid Sans",sans-serif;
font-weight: 400;
font-size: 1.2em;
}
#displaySubmenu ul li{
list-style:none;
border-bottom:2px solid #d8d8d8;
padding: 3% 0;
}
#displaySubmenu ul li:last-child{
list-style:none;
border-bottom:none;
}
#displaySubmenu ul li:before{
content:"\25CF";
color:#f9540a;
padding-right:3%;
vertical-align:middle;
}
#displaySubmenu ul li a{
color:#000;
text-decoration:none;
}
#displaySubmenu {
background: #ffffff;
/* absolute to #wrapperWh */
position:absolute;
top:100%;
height:auto;
z-index:1;
}
/* Call Navigation */
#callNavigation a{
color:black;
}
#callNavigation a:hover {
text-decoration:none;
}
#callNavigation a p:last-child {
font-weight:bold;
}
#callNavigation p {
display:inline;
}
#callNavigation p span{
display:block;
}
#callNavigation p span:last-child{
font-size:2em;
}
#callNavigation a i {
color:#f9540a;
font-size:3em;
vertical-align: middle;
float:left;
padding-right: 2%;
}
/* main content */
.curtainBackground {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: rgb(0, 0, 0); /* The Fallback */
background: rgba(0, 0, 0, 0.7);
}
.wrapperMain {
overflow:hidden;
}
#mainContent {
height:auto;
padding: 0;
background-color: grey;
z-index:-1;
/*relative for floatingText*/
position:relative;
font-family:'Droid Sans', sans-serif;
font-weight:700;
font-size:1.2em;
font-family: 'Oswald', sans-serif;
}
.floatingText {
/* absolute for #owl-main*/
position:absolute;
top:0;
left:2%;
width:100%;
height:auto;
color:#000;
}
.floatingText h3 {
font-weight: 800;
font-size: 3.5em;
}
.floatingText h3 span {
color:#f9540a;
}
.floatingText ul {
list-style:none;
font-family:'icomoon';
padding:0;
}
.floatingText ul li {
height: 35px;
}
.floatingText ul li:before{
content: "\e803";
padding-right: 2%;
color:#f9540a;
font-size:2em;
}
a.orangeButton {
background-color:#f9540a;
color: #FFF;
padding:10px 50px;
-webkit-border-radius:40px;
-moz-border-radius:40px;
border-radius:40px;
-moz-box-shadow: 0 0 5px 5px #5b5b5b;
-webkit-box-shadow: 0 0 5px 5px #5b5b5b;
box-shadow: 0 0 5px 5px #5b5b5b;
display: inline-block;
}
a.orangeButton:hover {
text-decoration:none;
}
.downloadApp {
margin-top: 5%;
}
.downloadApp p {
font-size:26px;
margin:0;
}
#owl-main > div {
max-height: 950px;
}
#owl-main > div img {
margin:0 auto;
width: 100%;
}
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot?rdonbp');
src:url('../fonts/icomoon.eot?rdonbp#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?rdonbp') format('truetype'),
url('../fonts/icomoon.woff?rdonbp') format('woff'),
url('../fonts/icomoon.svg?rdonbp#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[data-icon]:before {
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
.icon-approved:before {
content: "\e800";
}
.icon-facebook:before {
content: "\e801";
}
.icon-phone:before {
content: "\e802";
}
.icon-tick:before {
content: "\e803";
}
.icon-twitter:before {
content: "\e804";
}
.icon-youtube:before {
content: "\e805";
}
/* Large devices Bootstrap(large desktops, 1200px and up) */
@media screen and (max-width:1200px) { }
/* Medium devices Bootstrap(desktops, 992px and up) */
@media screen and (max-width:992px) {
#topNavigation.navbar-default {
font-size: 1em;
}
#topNavigation ul {
padding:0;
}
#socialNavigation li a i{
font-size: 2.8em;
}
}
/* Small devices Bootstrap(tablets, 768px and up) */
@media screen and (max-width:768px) {
.navbar-nav{
margin:0;
}
#topNavigation {
width:100% !important;
border:none;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
font-weight: 400;
}
#topNavigation ul {
padding:0;
}
#topNavigation li {
padding:1%;
}
/*for better responsive*/
#topNavigation li:first-child,
#topNavigation li:nth-child(2),
#topNavigation li:nth-child(3),
#topNavigation li:nth-child(4),
#topNavigation li:last-child {
width:100%;
border:none;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
padding: 1% 2%;
}
#topNavigation li a {
padding:1%;
}
#topNavigation li a span {
display:inline;
}
#socialNavigation {
position: absolute;
left: 3%;
top:0%;
}
#socialNavigation li {
float:left;
display:inline;
}
#socialNavigation li a i{
font-size: 2.8em;
}
}
@media screen and (max-width:332px) {
#topNavigation li a {
padding:2%;
}
}
我使用溢出：隐藏在.wrapperM ain，否则它没有高度，因此我不能应用.curtainBackground。但由于这种溢出，橙色按钮变得不可点击！
我已经尝试了几件事情....清除容器....溢出-x溢出-y，z-索引高为按钮...但没有任何工作。你看，如果我尝试使用overflow：auto，它会出现一个水平滚动条，这也是错误的。
因此，最好的审判是目前的审判，但按钮不可点击。有关如何解决这个问题的任何建议？
谢谢！
您需要点击橙色按钮吗？ –
是的，这是我无法做到的！所以我需要橙色按钮的工作，但也水平滚动条不能出现 –