如何为分隔符创建一个完整的窗口页面高度边框？

Question

我正在尝试为网站创建一个登录页面，https://essaydapp.com提交并尝试进入该应用程序。我试图模仿他们的设计（见链接），但我遇到了一些问题：

截图：

1. https://imgur.com/w2GAphF
   
2. https://imgur.com/rimWY0s
   

在第一个屏幕截图中，您可以看到小的1px虚线边框，我希望它是整个页面的高度，而不仅仅是表单。 在第二个屏幕截图中，您可以看到页面的边缘，顶部有白色，但我希望它也是蓝色。

提前感谢您的帮助。

form {
  /*border: 10px solid #1acebc;*/
  padding: 28px;
  border-left: 1px solid black;
  border-left-style: dashed;
  border-right: 1px solid black;
  border-right-style: dashed;
}

button:hover {
  opacity: 0.8;
}

button {
  background-color: #09c;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

input[type=text],
input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #1acebc;
  box-sizing: border-box;
}

img {
  display: block;
  margin: 0 auto;
  padding-bottom: 60px;
  padding-top: 30px;
  width: 300px;
  height: 300px;
}

body {
  background-color: #e7f3f6;
  /*border-left: 250px solid #007da5;
  border-right: 250px solid #007da5;*/
  border-left: 175px solid #007da5;
  border-right: 175px solid #007da5;
  padding-top: 175px;
  padding-bottom: 215px;
}

<form>
  <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" alt="profilepicture">
  <input type="text" placeholder="Username">
  <input type="password" placeholder="Password">
  <button type="button" name="Login">Login</button>
</form>

Answer 1

此代码从左侧和右侧删除任何填充。 我希望这就是你想要的。

body{
    border: 1px dashed;
    backgroud-color: #e7f3f6;
    margin-left: 0px;
    margin-right: 0px;
}

Answer 2

您现有的代码有些混乱。相反，我建议使用以下弹性框解决方案

＆＃13;

＆＃13;

body {
  padding: 0;
  margin: 0 auto;
  background-color: #007da5;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

form {
  display: flex;
  width: 75%; /*Set the width required*/
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #e7f3f6;
  border-left: 1px dashed black;
  border-right: 1px dashed black;
}

img {
  width: 300px;
  height: 300px;
  padding-bottom: 60px;
  padding-top: 30px;
}

button:hover {
  opacity: 0.8;
}

button {
  background-color: #09c;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 85%;
}

input[type=text],
input[type=password] {
  width: 85%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #1acebc;
  box-sizing: border-box;
}

＆＃13;

<form>
  <img src="https://i.imgur.com/ihZBCxx.png" alt="profilepicture">
  <input type="text" placeholder="Username">
  <input type="password" placeholder="Password">
  <button type="button" name="Login">Login</button>
</form>

＆＃13;

＆＃13;

＆＃13;