How to stretch the site to full page?

A

Alexander Konovalov2014-06-21 17:49:56

css

Alexander Konovalov, 2014-06-21 17:49:56

Hello everyone!) I have a problem with the site. When you open it on mobile devices, the menu buttons slide to the right.
I am attaching screenshots: This screenshot shows that the menu buttons have moved to the right, this is due to the fact that there is free space at the bottom of the page. As you can see in the second screenshot, removing the free space at the bottom, the menu buttons do not move out:
Question: how to remove the free space? In the second screenshot, I used br, but this is a bad option.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">	
  <title>AdMyApps.ru | Регистрация</title>
  <link rel="stylesheet" href="../css/style.css">
  <script type="text/javascript" src="../js/script.js"></script> 
</head>  
<body>

<header class="header">
    <div class="top"><!--top-->
      <div class="wrap">
        <div class="logo">
          <a href="/"></a>
        </div>
        <div class="head-menu">
          <ul>
            <li><a href="../index.php">Главная</a></li>
            <li><a href="this_avto.php">Войти</a></li>
            <li><a href="register.php">Регистрация</a></li>
            <div class="clear"></div>
          </ul>
        </div>
        <div class="clear"></div>
      </div>
    </div><!--top-->	
    
<div class="registerblock">
    <div class="wrap">
      <div class="register-bl">
        
            <form action="register.php"  method="post" name="form" id="registration"> 
            	  <br>
            	  <br>
            	  <br>
            	  <br>
            	  <br>
            	  
            	  <input name="email" class="input" type="text" maxlength="25" placeholder="Электронная почта"/>
              
              <input name="name" class="input" type="text"  maxlength="15" placeholder="Имя"/> 
              
              <input name="firstname" class="input" type="text" maxlength="25" placeholder="Фамилия"/>
              
              <input name="me" class="input" type="text" maxlength="25" placeholder="Электронный кошелёк">
               
              <input name="password" class="input" type="password" maxlength="25" placeholder="Пароль"/>
              <br>
              <input name="repassword" class="input" type="password" maxlength="25" placeholder="Повторите пароль"/> 
              
              <input name="pkey" type="text" class="input" placeholder="Введите код с картинки">
              <br>
              <img src="captcha/captcha.php" style="margin: 0 auto;">
              <br>
              <input type="submit" value="Регистрация →" name="button" class="button" onclick="return thisform(this.form)" style="margin: 0 auto;"> 
            </form>  
    </div>
  </div>
</div>
  
</header>	

  <footer>
    <div class="wrap">
      <p>PayForInstall © 2014</p>
      <p>Электронная почта [email protected]</p>
    </div>
  </footer>
</body>
</html>

* {
  margin: 0;
  padding: 0;
}
html{
  height: 100%;
  width: 100%;
  }
body{
  position: relative;
  background-repeat: repeat;
  font-family: 'PT Sans', sans-serif;
}
.wrap{
  width: 1060px;
  margin: auto;
  min-width: 1060px;
}
header{
  background-color: #2c3e50;
}
.header{
  padding-bottom: 63px;
}
header .top{
  height: 76px;
  border-bottom: 1px solid #263545;
}
.registerblock{
  background-color: #2c3e50;
  padding: 25px 0 48px 0;
  margin: 0 auto;
}
.register-bl{
  padding: 25px;
  width: 350px;
  height: 600px;
  margin: 0 auto;
  background: url(../img/log.png) no-repeat center;
}

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

Y

Yuri Lobanov, 2014-06-21
@iiil

Can you provide the code?
I meant with css
try to write in css

body, html {
    height:100%;
    min-height:100%;
}

L

Lisonok, 2014-06-21
@Lisonok

body{
    min-height: 100%;
}

V

Vitaly Kirenkov, 2014-06-21
@DeLaVega

Navigation issue:

.wrap{
  width: 1060px;
  margin: auto;
  min-width: 1060px;
}

First, get rid of min-width, look at the behavior of the layout, and then build on this.
And in general, the width of 1060 is not ok, to put it mildly ...