Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
203 views
in Technique[技术] by (71.8m points)

html - how can i avoid spaces that come at the bottom of screen when resizing window?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
  .navbar-custom { 
            background-color:rgb(128 128 128 / 18%); 
            height:48px;
            width:100%
  }
  .close{
    margin-bottom: 40px;
  }
  h5{
    margin-top: 30px;
    margin-left: 30px;
    margin-bottom: 10%;
  }
  .container-fluid {
    max-width: 100%;
    padding-right:0;
    padding-left:0;
    margin-right:0;
    margin-left:0
 }
 html, body {
 margin: 0; 
 padding: 0;
 position: relative;
 width: 100%;
 right:0;
  padding-right: 0px!important;
  margin-right: 0px!important; 
  width: 100vw; 
  overflow-x: hidden;
 }
 .row row-cols-1{
     width: 100%;
     right: 0;
 }
 .img-fluid{
     max-width: 100%;
     height : auto;
 }
 .btn btn-primary{
     width: 100%;
    text-align: center;
    display: block;
    width: 48%;
    box-sizing: border-box;
    text-align: center;
    margin-right: 10px;
    position: absolute;
    margin-left: 5px;
    margin-right: 5px;
 }
 
</style>
</head>
<body>  
<nav class="navbar navbar-custom ">
   <a class="navbar-brand" href="#">
    <img src="logo.png" class="logo1" alt="logo" style="width:50px;">
  </a>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
        <button type="button" class="close " aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
    </li>
</ul> 
</nav>  
<div class="container-fluid "> 
<h5><b>Do you have Fever above 101.4?</b></h5>
</div>
<div class="container-fluid ">
  <img src="fever.png" class="img-responsive center-block d-block mx-auto mt-5" alt="logo" style="width:200px;">
</div>
</div>
<div class="container mt-5">
    
    <div class="row row-cols-1  mx-2 ">
        
<button type="button" class="btn btn-primary  mt-5  ">Yes,I do</button>
<button type="button" class="btn btn-primary  mt-1">No, I don't</button>

</div> 
</div>
</body>
</html>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...