如何为分隔线制作完整的窗口页面高度边框？

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 { 
 
    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; 
 
}

<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>

Answer 2

此代码从左右去除任何填充数据。 我希望这就是你想要的。

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