mathmaniac88
mathmaniac88

Reputation: 640

position:fixed leads to no background color

I added the style position:fixed to the #wrapper div element and then the background-color:#333 does not show

Here is my code:

winWidth = window.innerWidth || document.body.clientWidth;
headMarg = (winWidth - 636) / 2;
document.getElementById("header").style.transform = "translate(" + headMarg + "px,10px)";
document.getElementById("wrapper").style.width = winWidth;
document.getElementById("wrapper").style.position = "fixed";
document.getElementById("content").style.width = winWidth * 2 / 3 + "px";
@import url('https://fonts.googleapis.com/css?family=VT323');
body {
  font-family: VT323;
  font-size: 20px;
  background-color: #efefef;
}

#header {
  background-color: rgba(255, 255, 255, 0.6);
  height: 70px;
  position: fixed;
}

.tab {
  border-left: 2px solid #F1453D;
  border-right: 2px solid #F1453D;
  padding-left: 30px;
  padding-right: 30px;
  transition: all 0.3s;
}

.tab:hover {
  background-color: #F1453D;
  color: white;
}

#wrapper {
  background-color: #333;
  height: 90px;
  box-shadow: 0px 5px 5px grey;
}

#content {
  background-color: white;
  height: 1000px;
}
<div id="wrapper">
  <div id="header">
    <center>
      <table style="display:inline;border-collapse:collapse">
        <tr>
          <td style="padding-left:30px">
            <a href="http://clickthebutton.000webhostapp.com/index.html"><img src="http://clickthebutton.000webhostapp.com/button_logo.png" height="64" width="64" /></a>
          </td>
          <td style="padding-right:50px" valign="center">the Button</td>
          <td class="tab">
            <center><img src="http://clickthebutton.000webhostapp.com/home_icon.png" /><br />Home</center>
          </td>
          <td class="tab">
            <center><img src="http://clickthebutton.000webhostapp.com/play_icon.png" /><br />Play!</center>
          </td>
          <td class="tab">
            <center><img src="http://clickthebutton.000webhostapp.com/about_icon.png" /><br />About</center>
          </td>
          <td class="tab">
            <center><img src="http://clickthebutton.000webhostapp.com/account_icon.png" /><br />Account</center>
          </td>
        </tr>
      </table>
    </center>
  </div>
</div>
<center>
  <div id="content">hi and test</div>
</center>

Upvotes: 0

Views: 1012

Answers (1)

Jorjon
Jorjon

Reputation: 5434

position:fixed removes the element from the flow, so it doesn't know how long it is (it doesn't have width). So you need to tell the element how far it should stretch.

#wrapper{
    background-color:#333;
    height:90px;
    width:100%; // <--- add this
    box-shadow:0px 5px 5px grey;
}

<!DOCTYPE html>
<html>
<head>
<title>Click the Button | Home</title>
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<style>
@import url('https://fonts.googleapis.com/css?family=VT323');
body {
    font-family:VT323;
    font-size:20px;
    background-color:#efefef;
}
#header{
    background-color:rgba(255,255,255,0.6);
    height:70px;
    position:fixed;
}
.tab{
    border-left: 2px solid #F1453D;
    border-right: 2px solid #F1453D;
    padding-left:30px;
    padding-right:30px;
    transition: all 0.3s;
}
.tab:hover{
    background-color: #F1453D;
    color:white;
}
#wrapper{
    background-color:#333;
    height:90px;
    width:100%;
    box-shadow:0px 5px 5px grey;
}
#content{
    background-color:white;
    height:1000px;
}
</style>
<div id="wrapper">
<div id="header">
<center>
<table style="display:inline;border-collapse:collapse">
<tr>
<td style="padding-left:30px"><a href="http://clickthebutton.000webhostapp.com/index.html"><img src="http://clickthebutton.000webhostapp.com/button_logo.png" height="64" width="64"/></a></td>
<td style="padding-right:50px" valign="center">the Button</td>
<td class="tab"><center><img src="http://clickthebutton.000webhostapp.com/home_icon.png"/><br />Home</center></td>
<td class="tab"><center><img src="http://clickthebutton.000webhostapp.com/play_icon.png"/><br />Play!</center></td>
<td class="tab"><center><img src="http://clickthebutton.000webhostapp.com/about_icon.png"/><br />About</center></td>
<td class="tab"><center><img src="http://clickthebutton.000webhostapp.com/account_icon.png"/><br />Account</center></td>
</tr>
</table>
</center>
</div>
</div>
<center>
<div id="content">hi and test</div>
</center>
<script>
winWidth = window.innerWidth || document.body.clientWidth;
headMarg = (winWidth - 636)/2;
document.getElementById("header").style.transform = "translate(" + headMarg + "px,10px)";
document.getElementById("wrapper").style.width = winWidth;
document.getElementById("wrapper").style.position = "fixed";
document.getElementById("content").style.width = winWidth*2/3 + "px";
</script>
</body>
</html>

Upvotes: 2

Related Questions