Fatal编程技术网
  • html/
  • HTML/CSS-div高度问题

HTML/CSS-div高度问题

html css

HTML/CSS-div高度问题,html,css,Html,Css,因此，我的页脚与div的底部部分重叠。我包含了一幅图像。我不明白我做错了什么。我试着玩弄高度值，但它不起作用。我做错了什么 下面是我的背景div、表单div和页脚的值 .hero{ background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.4)), url('4.jpg'); min-height:800px; background-position: center; background-siz

因此，我的页脚与div的底部部分重叠。我包含了一幅图像。我不明白我做错了什么。我试着玩弄高度值，但它不起作用。我做错了什么

下面是我的背景div、表单div和页脚的值

.hero{
    background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.4)), url('4.jpg');
    min-height:800px;
    background-position: center;
    background-size: cover;
    overflow:hidden;
    position: relative;
    
}
.form{
margin: 10px 25%;
width:50%;
position: absolute; 
border:2px solid black; 
padding:20px;border-radius: 25px;
background:silver; 
opacity: 0.8;
}
.footer{
    
    left:0px;
    width:100%;
    height:100px;
    background:pink;
    position: fixed;
    bottom: 0;

}
顺便说一句，我的页脚在div英雄里面。。Div英雄充当容器Div

以下是我的html代码：

<!DOCTYPE html>
<html>
<?php
$db = mysqli_connect("localhost", "root", "", "therapy");
  SESSION_START();
  if (isset($_POST['upload'])) {
    $first= mysql_real_escape_string($_POST['name']);
    $last= mysql_real_escape_string($_POST['name1']);
    $country= mysql_real_escape_string($_POST['country']);
    $city= mysql_real_escape_string($_POST['city']);
    $age= mysql_real_escape_string($_POST['age']);
    $username=$_SESSION['username'];
    $sql= "UPDATE `userinfo` SET `FirstName`='$first',`LastName`='$last',`Country`='$country',`City`='$city',`Age`='$age' WHERE `Username`='$username'";
    $result= mysqli_query($db,$sql);
    $_SESSION['username']= $username;
    if($result)
    {
        echo $_SESSION['message']= " You submitted ";
        header("Location: profile2.php");
    }
    else
    {
        echo $_SESSION['message'] = "wrong information";
    }
  }
 
  ?>
<style>
.dp{
    border-style: solid; 
    border-radius: 200px; 
    border-color: black; height: 200px; width:200px;
overflow-y: hidden; overflow-x:hidden; margin-left:35%;
}
@media (max-width:700px){
    .dp{
         float:left;
         margin-left:10%;
         height: 150px; width:150px;
    }
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>
<div class="hero">
<div class="nav-bar">
<div class="nav-log">
<img src="handshake.png" style="width: 105px;
    height:100px;">
</div>
<div class="nav-links">

<ul style="margin-left:50px; display: inline;">

 <a href=""><li>HOME</li></a>
  <a href=""><li>ABOUT</li></a>
  
</ul>
<button type="button" class="btn">SIGN UP</button>
</div>

</div>
<div class="form" style="margin: 10px 25%; width:50%; position: absolute; border:2px solid black; padding:20px;border-radius: 25px; background:silver; opacity: 0.8; ">

<div class="dp" style="">
    <?php
    error_reporting(E_ALL & ~E_NOTICE);
    $pic=$_SESSION['image'];
        echo "<img src='images/".$pic."' >";
    
  ?>
    </div>
<br>

  <div class="form-group">
  
  <form class="forms" method="POST" action="profile.php" enctype="multipart/form-data">
 <label for="exampleInputEmail1">Name:</label>
    <input type="text" class="form-control"  name="name" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div>
  <div class="form-group">
   <label for="inlineFormInputGroup">Country:</label>
   <input type="text" class="form-control" name="country" id="inlineFormInputGroup" placeholder="Username">
   </div>
  <div class="form-group">
    <label for="exampleInputPassword1">City:</label>
    <input type="text" class="form-control" name="city" id="exampleInputPassword1" placeholder="Password">
  </div>
    <div class="form-group">
    <label for="exampleInputPassword1">Age: </label>
    <input type="number" class="form-control" name="age" id="exampleInputPassword1" placeholder="Confirm Password">
  </div>
   <br>

  <button type="submit" class="btn btn-primary" name="register_btn">Submit</button>
</br>

</form>
 
    
  </div>
<div class="footer">
<center>
<div class="contact">
<p style="padding-top:10px;"> <b>FOLLOW US ON</b> </p><br><div class="social" style=" display: inline;">
<img src="fb.png" style="width:30px; height:30px;">
<img src="instagram.png" style="width:30px; height:30px;"></div>
</div>
</center>
</div>

</div>

</body>
 </html>


.dp{
边框样式：实心；
边界半径：200px；
边框颜色：黑色；高度：200px；宽度：200px；
溢出-y:隐藏；溢出-x:隐藏；左边距：35%；
}
@介质（最大宽度：700px）{
.dp{
浮动：左；
左边距：10%；
高度：150px；宽度：150px；
}
}

    


注册


姓名：
国家：
城市：
年龄：


提交


继续关注我们
您的页脚位于：该元素将从正常文档流中删除，并且在页面布局中不会为该元素创建任何空间

如果希望能够滚动到足以看到页脚下的内容，则需要补偿内容容器中页脚的高度

在这里，它可以是您的表单，但更通用的方法是在主体或页脚旁边的容器上执行

#容器{
宽度：100%；
页边距底部：100px；/*页脚高度*/
背景：灰色；
}
#页脚{
位置：固定；
宽度：100%；
高度：100px；
底部：0；
背景：黄色；
}

这是我的集装箱

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

这是我的容器的末端

这是我的页脚
将
最小高度
更改为
900px
并移除页脚
高度：100px



.hero{
背景图像：线性渐变（rgba（0,0,0,0.3），rgba（0,0,0.4）），url（'4.jpg'）；
最小高度：900px；
背景位置：中心；
背景尺寸：封面；
溢出：隐藏；
位置：相对位置；
}
.表格{
利润率：10px25%；
宽度：50%；
位置：绝对位置；
边框：2件纯黑；
填充：20px；边界半径：25px；
背景：银；
不透明度：0.8；
}
.页脚{
左：0px；
宽度：100%；
背景：粉红色；
位置：固定；
底部：0；
}
.dp{
边框样式：实心；
边界半径：200px；
边框颜色：黑色；高度：200px；宽度：200px；
溢出-y:隐藏；溢出-x:隐藏；左边距：35%；
}
@介质（最大宽度：700px）{
.dp{
浮动：左；
左边距：10%；
高度：150px；宽度：150px；
}
}




    


注册


姓名：
国家：
城市：
年龄：


提交


继续关注我们

试试：


这将使您的页脚向下移动，并提供有关问题原因的更多信息。然后你可以从那里回去工作。您还可以使用
position:absolute设置页脚并使用
左/右/上/下
和
页边距左/右/上/下
进行调整。否则，如上所述，请尝试调整容器的高度，并在容器上设置
位置：相对
或
绝对
这里的主要问题是您的hero和footer类中的位置参数不匹配。您还没有为页脚css指定top属性（因此导致重叠）

最佳实践建议，所有未用作弹出窗口的内容都应该具有相对或绝对位置的div样式


如果你想让它悬停或其他什么，那么你可能应该在footer的position参数中使用sticky值
我认为这是因为footer是positionfixed@Sfili_81改变了，但不起作用：（你能添加你的html代码吗？@RayeesAC addedmy footer在hero分区内。我应该在那里做一些更改吗？你应该通过增加hero高度进行检查，如果没有，那么可以使用padding bottom:100px；进行测试。然后

.form {position: relative;}

.hero {position: relative;}

.footer {position: relative;}