我在使用溢出时遇到了一些麻烦：隐藏以给容器增加高度....
所以......如果你看到这里：https://jsfiddle.net/8xxcm7vw/1/
HTML：
.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%;
}
}
的CSS：
{{1}}
我正在使用overflow：隐藏在.wrapperMain上，否则它没有高度，因此我无法应用.curtainBackground。但由于这种溢出，橙色按钮变得无法点击!!!
我已经尝试了几件事....清理容器.... overflow-x overflow-y，z-index为按钮高...但没有任何作用。
你知道，如果我尝试使用overflow：auto，它会显示一个水平滚动条，这也是错误的。
所以最好的赞成就是现在的那个，但按钮不可点击。关于如何解决这个问题的任何建议？
谢谢！
答案 0 :(得分：0)
更新此css并在您的本地运行。更新了链接https://jsfiddle.net/8xxcm7vw/2/
/*unwanted default Bootstrap*/
.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 none repeat scroll 0 0;
display: inline-block;
width: 100%;
}
#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 none repeat scroll 0 0;
box-shadow: 0 6px 5px 0 rgba(0, 0, 0, 0.75);
display: inline-block;
position: relative;
width: 100%;
z-index: 999;
}
#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 {
display: inline-block;
overflow: hidden;
position: relative;
width: 100%;
}
#mainContent {
background-color: grey;
font-family: "Oswald",sans-serif;
font-size: 1.2em;
font-weight: 700;
height: auto;
padding: 0;
position: relative;
}
.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%;
}
}