css margin-top推低了我的页脚
[英]css margin-top is shoving down my footer
问题描述
我正在使用一个网站，通常将它们与页眉，内容和页脚分开。 当我想在内容/登录名和标题之间添加更多空间时，我会遇到一些问题...
当我简单地添加margin-top: 100px; content或login ，这也推低了我的footer ，我不希望那样。 如何降低我的login而不降低footer ？
在此图像中，您可以看到我的内容中有足够的空间用于登录。
Body { margin: 0; background-image: linear-gradient(to right, #0098d9, #0098d9 49%, #ed1b24 49%); font-family: Verdana; } .MainDiv { width: 80%; min-height: 800px; height: 100px; margin-left: auto; margin-right: auto; background-color: white; } .header { text-align:center; margin:0px auto; width: 100%; height: 20%; } .content { margin-top: 0px; margin-bottom: 0px; height: 65%; } .footer { height: 15%; text-align: center; font-size: 12px; } .login { width: 30%; height: 30%; margin-left: auto; margin-right: auto; background: #0098d9; border: 0.1em solid #0098d9; border-radius: 1em; text-align: center; }
<body> <div class="menu"> Menu:<br /> <a href="Overview.php">Machine pages</a> </div> <div class="Maindiv"> <div class="header"> logo here </div> <div class="content"> <form action="Index.php" method="post" enctype="multipart/form-data"> <div class="login"> <table class="loginTable"> <tr> <td align="center" colspan="2">Admin login</td> </tr> <tr> <td width="10px"><img class="icon" src="images/User.png"></td> <td><input type="text" name="Username" placeholder="Username"</td> </tr> <tr> <td><img class="icon" src="images/locked.png"></td> <td><input type="password" name="Password" placeholder="Password"></td> </tr> <tr> <td colspan='2' align="right"><input type="submit" name="Login" value="Login"></td> </tr> </table> </div> </form> <p class="errorMessage"><?php echo $message;?></p> </div> <div class="footer"> Machinefabriek van de Weert BV <br /> W: <a href="http://www.vandeweert.nl">www.vandeweert.nl</a><br /> T: +31 (0)492-549 455 </div> </div> </body>
3 个解决方案
解决方案1
2 2015-10-13 13:53:53
而不是保证金给填充
更改.content类的CSS ...它将起作用
Body { margin: 0; background-image: linear-gradient(to right, #0098d9, #0098d9 49%, #ed1b24 49%); font-family: Verdana; } .MainDiv { width: 80%; min-height: 800px; height: 100px; margin-left: auto; margin-right: auto; background-color: white; } .header { text-align:center; margin:0px auto; width: 100%; height: 20%; } .content { padding : 25% ; height: 65%; } .footer { height: 15%; text-align: center; font-size: 12px; } .login { width: 30%; height: 30%; margin-left: auto; margin-right: auto; background: #0098d9; border: 0.1em solid #0098d9; border-radius: 1em; text-align: center; }
<body> <div class="menu"> Menu:<br /> <a href="Overview.php">Machine pages</a> </div> <div class="Maindiv"> <div class="header"> logo here </div> <div class="content"> <form action="Index.php" method="post" enctype="multipart/form-data"> <div class="login"> <table class="loginTable"> <tr> <td align="center" colspan="2">Admin login</td> </tr> <tr> <td width="10px"><img class="icon" src="images/User.png"></td> <td><input type="text" name="Username" placeholder="Username"</td> </tr> <tr> <td><img class="icon" src="images/locked.png"></td> <td><input type="password" name="Password" placeholder="Password"></td> </tr> <tr> <td colspan='2' align="right"><input type="submit" name="Login" value="Login"></td> </tr> </table> </div> </form> <p class="errorMessage"><?php echo $message;?></p> </div> <div class="footer"> Machinefabriek van de Weert BV <br /> W: <a href="http://www.vandeweert.nl">www.vandeweert.nl</a><br /> T: +31 (0)492-549 455 </div> </div> </body>
解决方案2
2 已采纳 2015-10-13 14:00:39
您可能需要做两件事：
将此行添加到CSS的顶部： * { box-sizing: border-box; } * { box-sizing: border-box; } 。 它将确保填充不会影响元素的高度或宽度。
然后在.content添加所需的padding ，而不是margin 。 这将为您工作:)
解决方案3
0 2015-10-13 13:55:22
因为您在每个元素上使用了总高度的百分比。 如果在其中一些位置之前留一个空格，它们的高度将保持不变，而其他元素将被向下推。
您可以使用padding代替margin ，padding在元素内部，并在元素的限制与其内容之间定义一个空格。
带有页边距的CSS粘性页脚
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.