Question

我的页脚不能全宽。它遵循70％的parrent div。我不知道如何将其更改为全宽，因为当我将其向下移动以获得自己的容器时，它将最终位于标题中或覆盖之前的内容。谁能帮我？？请！ thaanks

＆＃13;

/* FOOTER */
footer {
    margin-top: 40px;
    position: relative;
    width: 100%;
    height: 200px;
    background: rgba(226, 219, 219, 0.94); 
}
.footer_col1 {
    height: 70px;
    padding-top: 40px;
    text-align: center;
}
.footer_col2 {
    height: 30px;
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif;
}

＆＃13;

Here is some of my Html:
<div class="colonne_1_left_section4">
            <h1 style="padding-top: 90px;">COMBINE DESIGN &amp; COLORS</h1>
            <p class="trolley_text">The Art Trolley size 42 x 40.5 centimeters can be combined with our wall mount (Bamboo combined light/dark &amp; light or dark)- and hanged on it.<br><br>
            Choice of color completely up to you:<br><br>
        <img class="trolley_color_icons" alt="trolley color icons"src="billeder/colors_icon.png" style="float: left;">
        </p>
        </div>
        
        <div class="colonne_2_right_section4">
        <img class="trolley1" alt="trolley visual by groos"src="billeder/1.jpg">
        </div><br><br>
        
        
    <footer>
  <div class="footer_col1">
    <a href="#">
      <img alt="instagram_icon" src="billeder/Instagram_icon.png" style="width: 40px; height: 40px; padding-right: 10px;"></a>
    <a href="#">
      <img alt="facebppl_icon" src="billeder/facebook_icon.png" style="width: 40px; height: 40px; padding-left: 10px;"></a>
    </div>
    <div class="footer_col2">VISUAL ART BY GROOS © 2018</div>
        <div class="footer_col3">+45 27 50 12 83     info.visualbygroos@gmail.com</div>
</footer> 
        
</div>  
</div>

<script src="hamburger.js"></script>
<script src="slideshow"></script>
</body>
</html>

＆＃13;

Answer 1

每次使用HTML时，请确保您的正文标记有边距0

body {
        margin: 0;
    }

Answer 2

尝试使用vw（视口宽度）单位而不是所有％的东西。使用vw可以定义一个大小，无论你在其他div中使用div的重叠，但是根据你的窗口大小的大小：

if (data.types.length > 1){}

由于1vw是屏幕宽度的1/100，宽度：100vw表示：＆＃34;使此div跨越整个屏幕宽度＆＃34;。

Answer 3

确保您的body和html始终拥有margin: 0;，否则最终会留下额外的空间，就像您的页脚一样。像这样你可以使用100％的宽度，并且不会遇到任何问题：）

body, html {
  margin: 0;
}

＆＃13;

body, html {
  margin: 0;
}

/* FOOTER */
footer {
    margin-top: 40px;
    position: relative;
    width: 100%;
    height: 200px;
    background: rgba(226, 219, 219, 0.94); 
}
.footer_col1 {
    height: 70px;
    padding-top: 40px;
    text-align: center;
}
.footer_col2 {
    height: 30px;
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif;
}

＆＃13;

<div class="colonne_1_left_section4">
  <h1 style="padding-top: 90px;">COMBINE DESIGN &amp; COLORS</h1>
  <p class="trolley_text">The Art Trolley size 42 x 40.5 centimeters can be combined with our wall mount (Bamboo combined light/dark &amp; light or dark)- and hanged on it.<br><br> Choice of color completely up to you:<br><br>
    <img class="trolley_color_icons" alt="trolley color icons" src="billeder/colors_icon.png" style="float: left;">
  </p>
</div>

<div class="colonne_2_right_section4">
  <img class="trolley1" alt="trolley visual by groos" src="billeder/1.jpg">
</div><br><br>


<footer>
  <div class="footer_col1">
    <a href="#">
      <img alt="instagram_icon" src="billeder/Instagram_icon.png" style="width: 40px; height: 40px; padding-right: 10px;"></a>
    <a href="#">
      <img alt="facebppl_icon" src="billeder/facebook_icon.png" style="width: 40px; height: 40px; padding-left: 10px;"></a>
  </div>
  <div class="footer_col2">VISUAL ART BY GROOS © 2018</div>
  <div class="footer_col3">+45 27 50 12 83 info.visualbygroos@gmail.com</div>
</footer>

＆＃13;

我不能让我的页脚全宽

3 个答案: