将页面分成两个垂直且相同的带边框部分

Question

我目前正在尝试将一个页面分成两个相同的垂直部分，两侧各有一个边框。问题是我有两个部分 width:49vw;边框的大小为 1vw，等于 100vw，但各部分在彼此下方跳转，而不是内联。我已经设置了一个 JSFiddle，因此更容易显示。这是 JSFiddle 附带的代码。

.section1{
    background-color:#11181e;
    width:49vw;
    float:left;
    height:100vh;
    border-right: 1vw solid #F5E5D6; 
    margin:0;
    padding:0;  
}
.section2{
    background-color:#f1c40f;
    width:49vw;
    float:left;
    height:100vh;
    border-left: 1vw solid #000;  
    margin:0;
}

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/reset.css" media="screen" type="text/css" />
<link rel="stylesheet" href="css/styles.css" media="screen" type="text/css" />
</head>
<body>
<!--SECTION 1-->
    <div class="section1">
        <p>2D</p>
    </div>
<!--SECTION 2-->
    <div class="section2">
        <p>3D</p>
    </div>
</body>
</html>

这里是link：http://jsfiddle.net/VfTYs/4/

Answer 1

在 .section1 和 .section2 上使用 width: 50%; 和 box-sizing: border-box。

body{
 color:#fff;
 font-size:100pt;
}
.section1{
 background-color:#11181e;
 width:50%;
 float:left;
 height:100vh;
 border-right: 1vw solid #F5E5D6; 
    box-sizing: border-box;
    margin:0;
    padding:0; 
}
.section2{
 background-color:#f1c40f;
 width:50%;
 float:left;
 height:100vh;
 margin:0;
 padding:0;
  box-sizing: border-box;
}

<div class="section1">
2d
</div>
<div class="section2">
3d
</div>

将页面分成两个垂直且相同的带边框部分

Dividing a page into two vertical and identical sections with border

html

css

viewport-units