Question

我将样式position:fixed添加到#wrapper div元素，然后background-color:#333未显示

这是我的代码：

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>

Answer 1

position:fixed从流中删除了元素，因此它不知道它有多长（它没有width）。所以你需要告诉元素它应该伸展多远。

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

＆＃13;

<!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>

＆＃13;

位置：固定导致没有背景颜色

1 个答案: