ShellRox ShellRox - 4 months ago 8
CSS Question

CSS: How to limit horizontal/vertical scrolling?

Details



I have made a div navigator for my website, there are 4 menu buttons which float left, and 1 authentication button which floats right. navigators position is relative so it doesn't move.

CSS:

body {
background-color: #2B2B2B;
}



.main {
position: relative;
top: 0%;
left: 0%;
right: 0%;
width: 101.6%;
height: 10%;
z-index: 1;
min-height: 120px;
max-height: 120px;
background-color: rgba(26, 26, 26, 0.9);
}


.logo {
display: block;
float: left;
top: 0%;
left: 0%;
right: 0%;
/*background-image: url('images/logo.png');
width: 150px;
height: 155px;*/
font-size: 32pt;
color: white;
margin-top: 3%;
margin-left: 1%;
}

.menu {
display: inline-block;
position: relative;
top: 0%;
left: 0%;
right: 0%;
background-color: rgba(26, 26, 26, 0.9);
height: 100%;
width: 101%;
border-style: solid;
border-color: rgba(26, 26, 26, 0.9);
border-radius: 0%;
z-index: 1;
max-height: 7%;
max-width: 102.5%;
min-height: 50px;
min-width: 100%;
overflow: hidden;
}




.Button1 {
display: block;
font-size: 10pt;
float: left;
right: 15%;
left: 30%;
top: 0%;
white-space: nowrap;
color: white;
margin-top: 0%;
width: 7%;
font-family: sans-serif;
height: 3%;
padding: 25px 2px 55px 2px;
vertical-align: center;
text-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);;
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 70px;
transition: 0.1s ease-in;
-o-transition: 0.1s ease-in;
-ms-transition: 0.1s ease-in;
-moz-transition: 0.1s ease-in;
-webkit-transition: 0.1s ease-in;
}


.Button1:hover {
color: #C90205;
}


.Button2 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 10%;
white-space: nowrap;
color: white;
width: 7%;
margin-top: 0%;
font-family: sans-serif;
height: 3%;
text-align: center;
padding: 25px 0px 55px 0px;
text-align: center;
vertical-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);;
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 70px;
transition: 0.1s ease-in;
-o-transition: 0.1s ease-in;
-ms-transition: 0.1s ease-in;
-moz-transition: 0.1s ease-in;
-webkit-transition: 0.1s ease-in;
}

.Button2:hover {
color: #C90205;
}


.Button3 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 3%;
white-space: nowrap;
color: white;
margin-top: 0%;
width: 7%;
font-family: sans-serif;
height: 3%;
text-align: center;
padding: 25px 0px 55px 0px;
text-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);;
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 70px;
transition: 0.1s ease-in;
-o-transition: 0.1s ease-in;
-ms-transition: 0.1s ease-in;
-moz-transition: 0.1s ease-in;
-webkit-transition: 0.1s ease-in;
}

.Button3:hover {
color: #C90205;
}

.Button4 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 3%;
white-space: nowrap;
color: white;
margin-top: 0%;
width: 7%;
font-family: sans-serif;
height: 3%;
text-align: center;
padding: 25px 0px 55px 0px;
text-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);;
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 70px;
transition: 0.1s ease-in;
-o-transition: 0.1s ease-in;
-ms-transition: 0.1s ease-in;
-moz-transition: 0.1s ease-in;
-webkit-transition: 0.1s ease-in;
}

.Button4:hover {
color: #C90205;
}



.Button5 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 3%;
white-space: nowrap;
color: white;
margin-top: 0%;
width: 7%;
font-family: sans-serif;
height: 3%;
text-align: center;
padding: 25px 0px 55px 0px;
text-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);;
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 70px;
transition: 0.1s ease-in;
-o-transition: 0.1s ease-in;
-ms-transition: 0.1s ease-in;
-moz-transition: 0.1s ease-in;
-webkit-transition: 0.1s ease-in;
}

.Button5:hover {
color: #C90205;
}




.Button6 {
font-size: 10pt;
float: left;
right: 10%;
left: 23%;
top: 8%;
white-space: nowrap;
color: white;
margin-top: 0%;
font-family: sans-serif;
height: 10%;
width: 7%;
text-align: center;
height: 10%;
text-align: center;
padding: 28px 0px 55px 0px;
text-align: center;
line-height: 2px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);;
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 70px;
transition: 0.1s ease-in;
-o-transition: 0.1s ease-in;
-ms-transition: 0.1s ease-in;
-moz-transition: 0.1s ease-in;
-webkit-transition: 0.1s ease-in;
}

.Button6:hover {
color: #C90205;

}

.signin {
float: right;
width: 114px;
height: 42px;
margin-top: 0.5%;
margin-right: 1.9%;
color: red;
}

.mainpage {
height: 100%;
width: 80%;
}



html, body {margin:0;padding:0;height:100%}


Full Code.




Problem



Unfortunately if you look at this, and try to scroll horizontally you will see the overflow and it would just stay there, even though when i had the bottom content container
mainpage
div with the height of 100% and width of 80%, it would still be able to scroll down when there's nothing there at all.

As you see this code below, i have tried to limit
html
and
body
with specific resolution, which didn't fix my problem.

html, body {margin:0;padding:0;height:100%;width:100%}


Question



How could i limit my page from being scrolled in specific resolution only? Can resolution be greater than value of 100% so it can work?

Answer

your problem is here:

.main {
  width: 101.6%;
}
.mainpage {
  height: 100%;
  width: 80%;
}

you need to fix those properties like this:

*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  background-color: #2B2B2B;
}
.main {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 10%;
  z-index: 1;
  min-height: 120px;
  max-height: 120px;
  background-color: rgba(26, 26, 26, 0.9);
}
.logo {
  display: block;
  float: left;
  top: 0;
  left: 0;
  right: 0;
  /*background-image: url('images/logo.png');
	width: 150px;
	height: 155px;*/
  font-size: 32pt;
  color: white;
  margin-top: 3%;
  margin-left: 1%;
}
.menu {
  display: inline-block;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(26, 26, 26, 0.9);
  width: 100%;
  border-style: solid;
  border-color: rgba(26, 26, 26, 0.9);
  border-radius: 0;
  z-index: 1;
  max-height: 7%;
  max-width: 102.5%;
  min-height: 50px;
  min-width: 100%;
  overflow: hidden;
}
.Button1 {
  display: block;
  font-size: 10pt;
  float: left;
  right: 15%;
  left: 30%;
  top: 0%;
  white-space: nowrap;
  color: white;
  margin-top: 0%;
  width: 7%;
  font-family: sans-serif;
  height: 3%;
  padding: 25px 2px 55px 2px;
  vertical-align: center;
  text-align: center;
  line-height: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  ;
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 70px;
  transition: 0.1s ease-in;
}
.Button2 {
  font-size: 10pt;
  float: left;
  right: 10%;
  left: 23%;
  top: 10%;
  white-space: nowrap;
  color: white;
  width: 7%;
  margin-top: 0%;
  font-family: sans-serif;
  height: 3%;
  text-align: center;
  padding: 25px 0px 55px 0px;
  text-align: center;
  vertical-align: center;
  line-height: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 70px;
  transition: 0.1s ease-in;
}
.Button2:hover {
  color: #C90205;
}
.Button3 {
  font-size: 10pt;
  float: left;
  right: 10%;
  left: 23%;
  top: 3%;
  white-space: nowrap;
  color: white;
  margin-top: 0%;
  width: 7%;
  font-family: sans-serif;
  height: 3%;
  text-align: center;
  padding: 25px 0px 55px 0px;
  text-align: center;
  line-height: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 70px;
  transition: 0.1s ease-in;
}
.Button3:hover {
  color: #C90205;
}
.Button4 {
  font-size: 10pt;
  float: left;
  right: 10%;
  left: 23%;
  top: 3%;
  white-space: nowrap;
  color: white;
  margin-top: 0%;
  width: 7%;
  font-family: sans-serif;
  height: 3%;
  text-align: center;
  padding: 25px 0px 55px 0px;
  text-align: center;
  line-height: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 70px;
  transition: 0.1s ease-in;
}
.Button4:hover {
  color: #C90205;
}
.Button5 {
  font-size: 10pt;
  float: left;
  right: 10%;
  left: 23%;
  top: 3%;
  white-space: nowrap;
  color: white;
  margin-top: 0%;
  width: 7%;
  font-family: sans-serif;
  height: 3%;
  text-align: center;
  padding: 25px 0px 55px 0px;
  text-align: center;
  line-height: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  ;
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 70px;
  transition: 0.1s ease-in;
}
.Button5:hover {
  color: #C90205;
}
.Button6 {
  font-size: 10pt;
  float: left;
  right: 10%;
  left: 23%;
  top: 8%;
  white-space: nowrap;
  color: white;
  margin-top: 0%;
  font-family: sans-serif;
  height: 10%;
  width: 7%;
  text-align: center;
  height: 10%;
  text-align: center;
  padding: 28px 0px 55px 0px;
  text-align: center;
  line-height: 2px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 70px;
  transition: 0.1s ease-in;
}
.Button6:hover {
  color: #C90205;
}
.signin {
  float: right;
  width: 114px;
  height: 42px;
  margin-top: 0.5%;
  margin-right: 1.9%;
  color: red;
}
.mainpage {
  height: calc(100% - 185px);
  width: 80%;
}
<div class="main">
  <a class="logo" href="/" style="text-decoration:none">My Website</a>
</div>

<div class="menu">
  <a class="Button1" href="/">Button 1</a>
  <a class="Button2" href="/">Button 2</a>
  <a class="Button3" href="/">Button 3</a>
  <a class="Button4" href="/">Button 4</a>
  <a class="Button5" href="/support">Button 5</a>
  <a class="Button5" href="/">Button 6</a>
  <a class="signin" href="/login">AuthButton</a>
</div>

<div class="mainpage"></div>
<!-- This is page under the navigator for placing the content, right now it's empty -->

Comments