Отступ от края страницы при уменьшении размера браузера

227

17 марта 2017, 23:57

Добрый день!

При меньшении размера окна браузера появляется не понятный отступ от края страницы. Как от него избавиться и как это лечить?

Начальный дизайн:

и при уменьшении размера окна браузера:

Код:

 <body>
    <div id="header" class="d-inline-block">
        <a href="@Url.Action("Index", "Home")">
            <div id="logo">
                <div id="logobox">
                    @ViewBag.Title
                </div>
            </div>
        </a>
        <div id="menu">
            <ul>
            </ul>
        </div>
    </div>
    <div id="body">
        <div class="container-fluid" id="bodyblock">
            <div class="row-fluid" id="bodyblock">
                <div class="span2" id="sidebar">
                    <div id="navigate">
                        <li><a href="@Url.Action("Index", "Home")">Home</a></li>
                        <li id="navi" onclick="ulmenuClick();">Configuration</li>
                            <div id="ulmenu">
                                <li><a href="@Url.Action("Index", "ConfigurationURL")">Repository URL</a></li>
                                <li><a href="@Url.Action("Index", "ConfigTFSAccount")">Team Foundation Server Account</a></li>
                            </div>
                    </div>
                </div>
                <div id="bodybar">
                    <section class="content-wrapper main-content clear-fix" id="bodybox">
                        @RenderBody()
                    </section>
                </div>
            </div>
        </div>
    </div>
</body>

Answer 1

да вроде нормально всё

* { 
  margin: 0; 
  padding: 0; 
} 
 
.clear, 
.clear:after, 
.clear:before { 
  content: ""; 
  display: block; 
  clear: both; 
} 
 
html, 
body, 
.content { 
  height: 100%; 
  position: relative; 
} 
 
.header-block { 
  width: 100%; 
  height: 50px; 
  line-height: 50px; 
  background: rgba(64, 142, 184, .8); 
} 
 
.header-block h2 { 
  margin: 0 20px; 
  text-transform: uppercase; 
} 
 
.left, 
.right { 
  float: left; 
  box-sizing: border-box; 
} 
 
.left { 
  width: 30%; 
  min-height: 100%; 
  background: #222; 
} 
 
.right { 
  width: 70%; 
  height: 100%; 
  background: #eee; 
} 
 
.link-block ul { 
  display: block; 
  width: 80%; 
  margin: auto; 
} 
 
.link-block li { 
  list-style: none; 
  margin: 6px; 
} 
 
.link-block a { 
  text-decoration: none; 
  color: #eee; 
  text-transform: uppercase; 
  font-size: 14px; 
} 
 
.right-block { 
  width: 95%; 
  margin: auto; 
  min-height: 400px; 
  border: 1px solid rgba(200, 200, 200, .3); 
} 
 
.right-block h2 { 
  text-transform: uppercase; 
  font-size: 18px; 
  text-align: center; 
  padding: 6px 0; 
} 
 
.right-block p { 
  font-size: 20px; 
  font-weight: 600; 
  text-transform: uppercase; 
  font-size: 16px; 
  margin: 20px 0; 
} 
 
.git { 
  height: 400px; 
  background-color: #eee; 
} 
 
.git input { 
  display: block; 
  width: 90%; 
  margin: auto; 
  height: 24px; 
  border: none; 
  outline: none; 
  font-size: 16px; 
  font-weight: 900; 
  color: rgba(0, 0, 0, .7); 
  text-transform: uppercase; 
} 
 
.button { 
  display: block; 
  width: 150px; 
  height: 40px; 
  border: none; 
  outline: none; 
  background: linear-gradient(rgba(64, 142, 184, .8), rgba(64, 142, 184, .1)); 
  margin: 120px auto; 
  cursor: pointer; 
}

<div class="content clear"> 
  <div class="header-block"> 
    <h2>index</h2> 
  </div> 
  <div class="left"> 
    <div class="link-block"> 
      <ul> 
        <li><a href="">home</a></li> 
        <li><a href="">configuration</a></li> 
      </ul> 
    </div> 
  </div> 
  <div class="right"> 
    <div class="right-block"> 
      <h2>settings trigger configuration file :</h2> 
      <form action="" method="" class="git"> 
        <p>repository url:</p> 
        <input type="" placeholder="Git URL" name=""> 
        <p>repository login:</p> 
        <input type="" placeholder="login" name=""> 
        <p>repository password:</p> 
        <input type="password" placeholder="password" name=""> 
        <button name="" class="button">send </button> 
      </form> 
    </div> 
  </div> 
</div>