如何制作CSS边框线

Question

如何为右边框（带有社交按钮的左侧部分）建立height属性？ 我使用网格创建了这个模态窗口。

这是我的html代码段：

HashMap<Object, Object>

这是我的scss代码。我本来想在主要部分添加padding属性，但这没有任何意义。

    <form class="form">
        <div class="head">
            <h1>Log in to the Site</h1>
            <a href="#"><i class="fas fa-times"></i></a>
         </div>
    <div class="main">
        <div class="left">
            <button class="facebook">
                <i class="fab fa-facebook-f"></i>
                Log in with Facebook
            </button>
            <button class="google">
                <i class="fab fa-google-plus-g"></i>
                Log in with Google +
            </button>
        </div>
        <div class="right">
           <span class="wrap">
                <label for="login"> Login</label>
                <input type="text" name="login" class="login">
            </span>
            <span class="wrap">
                <label for="password">Password  </label>
                <input type="password" name="password" class="password">
            </span>
            <br>
            <span class="check-box">
                <label for="checkbox">Remember me</label>
                <input type="checkbox" name="checkbox" class="checkbox" checked>
            </span>
            <div>
              <button class="log-btn">Log in</button>
              <a href="#">Need help logging in?</a>
            </div>
        </div>
    </div>
        <div class="footer">
            <p>Don't have an account yet? <a href="#">Sign up</a></p>
        </div>
  </form>

我曾经使用border属性创建它，但是我需要使其更短（如图所示）

Answer 1

您可以使用以下属性在左侧和右侧之间放置另一个div

.middle {
    background-color : #ccc;
    width : 2px;
    height : 150px;
    margin-top : 15px;
    display : inline-block;
}

Answer 2

将表单标签放置为相对，并将form.form：放置在位置：绝对

  .main {
    background: $light-grey-color;
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    font-size: 14px;
    font-weight: bold;
      .left {
        padding: 40px 58px;
        border-right: 1px solid $grey-color;
        .facebook {
          background: #3e5b96;
          margin-bottom: 20px;
          padding: 10px 45px 10px 50px;
        }
        .google {
          background: $red-color;
        }
        button {
          display: flex;
          font-weight: bold;
          display: inline-block;
          vertical-align: middle;
          padding: 0;
          margin: 0;
          border: none;
          border-radius: 3px;
          white-space: nowrap;
          user-select: none;
          text-decoration: none;
          color: #fff;
          font-size: 14px;
          position: relative;
          padding: 10px 50px;
          i {
            position: absolute;
            left: 5px;
            top: 0;
            padding: 0 0 0 5px;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
          }
        }
      }
      .right {
        padding: 40px 58px;
        .wrap {
          display: block;
          margin-bottom: 20px;
          .login {
            width: 100%;
          }
          .password {
            width: 100%;
          }
          label {
            display: block;
            margin-bottom: 5px;
         }
       }
       .check-box {
         display: inline-block;
           .checkbox {
             float: left;
           }
         }
         div {
           display: flex;
           margin-top: 24px;
           justify-content: space-between;
           align-items: center;
           .log-btn {
             background: #252525;
             border: none;
             display: inline-block;
             vertical-align: middle;
             white-space: nowrap;
             user-select: none;
             font-family: 'Open sans';
             font-weight: bold;
             text-decoration: none;
             color: #fff;
             padding: 14px 30px;
            }
            a {
              color: #000;
            }
          }
       }
     }
     form.form{
       position: relative;
     }
     form.form:before {
       position: absolute;
       border-left: 1px solid #000;
       content: "";
       margin-left: 49%;
       top: 0;
       bottom: 0;
     }

 <form class="form">
   <div class="head">
    <h1>Log in to the Site</h1>
    <a href="#"><i class="fas fa-times"></i></a>
  </div>
  <div class="main">
    <div class="left">
      <button class="facebook">
        <i class="fab fa-facebook-f"></i>
        Log in with Facebook
      </button>
      <button class="google">
        <i class="fab fa-google-plus-g"></i>
        Log in with Google +
      </button>
    </div>
    <div class="right">
      <span class="wrap">
        <label for="login"> Login</label>
        <input type="text" name="login" class="login">
      </span>
      <span class="wrap">
        <label for="password">Password  </label>
        <input type="password" name="password" class="password">
      </span>
      <br>
      <span class="check-box">
        <label for="checkbox">Remember me</label>
        <input type="checkbox" name="checkbox" class="checkbox" checked>
      </span>
      <div>
        <button class="log-btn">Log in</button>
        <a href="#">Need help logging in?</a>
      </div>
    </div>
  </div>
  <div class="footer">
    <p>Don't have an account yet? <a href="#">Sign up</a></p>
  </div>
</form>

Answer 3

在.main div中添加定位的伪元素

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  margin: 1em auto;
  grid-column-gap: 1em;
}

.main::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 50%;
  /* adjust as required */
  width: 2px;
  /* adjust as required */
  transform: translate(-50%, -50%);
  background: red;
}

.main div {
  height: 75vh;
  background: lightblue;
}

<div class="main">
  <div></div>
  <div></div>
</div>