Html CSS和网站布局

有人能帮我复制屏幕的布局吗

<div class="colmask leftmenu">
    <div class="colleft">
        <div class="col1">
            <!-- Column 1 start -->
            <h2>Right</h2>

        </div>
        <div class="col2">
            <!-- Column 2 start -->
            <h2>Left</h2>
            <!-- Column 2 end -->
        </div>
    </div>
</div>

</body>
</html>

我想要的只是两列，跨越页面的大小，所以没有滚动条或任何东西

<div class="colmask leftmenu">
    <div class="colleft">
        <div class="col1">
            <!-- Column 1 start -->
            <h2>Right</h2>

        </div>
        <div class="col2">
            <!-- Column 2 start -->
            <h2>Left</h2>
            <!-- Column 2 end -->
        </div>
    </div>
</div>

</body>
</html>

我希望两列中较小的列位于左侧，而不是右侧，并且我希望能够为CSS或HTML中较大的区域选择图像

<div class="colmask leftmenu">
    <div class="colleft">
        <div class="col1">
            <!-- Column 1 start -->
            <h2>Right</h2>

        </div>
        <div class="col2">
            <!-- Column 2 start -->
            <h2>Left</h2>
            <!-- Column 2 end -->
        </div>
    </div>
</div>

</body>
</html>

不需要任何措辞，只有两列，较大的一列有背景图像

<div class="colmask leftmenu">
    <div class="colleft">
        <div class="col1">
            <!-- Column 1 start -->
            <h2>Right</h2>

        </div>
        <div class="col2">
            <!-- Column 2 start -->
            <h2>Left</h2>
            <!-- Column 2 end -->
        </div>
    </div>
</div>

</body>
</html>

感谢您的帮助

<div class="colmask leftmenu">
    <div class="colleft">
        <div class="col1">
            <!-- Column 1 start -->
            <h2>Right</h2>

        </div>
        <div class="col2">
            <!-- Column 2 start -->
            <h2>Left</h2>
            <!-- Column 2 end -->
        </div>
    </div>
</div>

</body>
</html>

HTML

<div class="colmask leftmenu">
    <div class="colleft">
        <div class="col1">
            <!-- Column 1 start -->
            <h2>Right</h2>

        </div>
        <div class="col2">
            <!-- Column 2 start -->
            <h2>Left</h2>
            <!-- Column 2 end -->
        </div>
    </div>
</div>

</body>
</html>

我设法得到了两列，但我不知道如何使它们成为一个单一的屏幕（全浏览器大小），以及如何在“右”的背景中获得图像

<div class="colmask leftmenu">
    <div class="colleft">
        <div class="col1">
            <!-- Column 1 start -->
            <h2>Right</h2>

        </div>
        <div class="col2">
            <!-- Column 2 start -->
            <h2>Left</h2>
            <!-- Column 2 end -->
        </div>
    </div>
</div>

</body>
</html>

谢谢。

<div class="colmask leftmenu">
    <div class="colleft">
        <div class="col1">
            <!-- Column 1 start -->
            <h2>Right</h2>

        </div>
        <div class="col2">
            <!-- Column 2 start -->
            <h2>Left</h2>
            <!-- Column 2 end -->
        </div>
    </div>
</div>

</body>
</html>

正文{
保证金：0；
填充：0；
边框：0；/*这将删除旧版本IE中视口周围的边框*/
宽度：100%；
背景：#fff；
最小宽度：600px；/*布局的最小宽度-如果不需要，请删除线条*/
/*“最小宽度”属性在旧版本的Internet Explorer中不起作用*/
字体大小：90%；
}
a{
颜色：#369；
}
a:悬停{
颜色：#fff；
背景:#369；
文字装饰：无；
}
h1，h2，h3{
保证金：.8em0.2em0；
填充：0；
}
p{
保证金：4EM0.8EM0；
填充：0；
}
/*“宽度”子菜单*/
#布局变暗{
明确：两者皆有；
背景：#eee；
边框顶部：4倍实心#000；
保证金：0；
填充：6px 15px！重要；
文本对齐：右对齐；
}
/*柱状容器*/
colmask先生{
position:relative；/*这修复了IE7溢出隐藏错误*/
明确：两者皆有；
浮动：左；
宽度：100%；/*整页宽度*/
溢出：隐藏；/*这将切掉任何悬垂的div*/
}
/*公共列设置*/
colright先生，
柯米德先生，
科勒夫特先生{
浮动：左；
宽度：100%；
位置：相对位置；
}
.col1，
.col2，
.col3{
浮动：左；
位置：相对位置；
填充：0.01米0；
溢出：隐藏；
}
/*2列（左菜单）设置*/
.左菜单{
背景：#fff；/*右栏背景色*/
}
.左菜单{
右：75%；/*右列宽*/
背景：#F4；/*左栏背景色*/
}
.leftmenu.col1{
宽度：71%；/*右列内容宽度*/
左：102%；/*100%加上左栏左填充*/
}
.leftmenu.col2{
宽度：21%；/*左列内容宽度（列宽减去左右填充）*/
左：6%；/*（右栏左和右填充）加上（左栏左填充）*/
}
.col1{
背景图像：url（“https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png");
}
氢{
高度：800px；
}

赖特
左边

请向我们展示您的代码，看看您迄今为止尝试了什么，我们将不编写您的代码。不过，如果您向我们展示您迄今为止所做的尝试，我们可以为您指出正确的方向。就“任何帮助”而言，如果您已经知道某个网页正在做您正在尝试做的事情，您可以使用您喜爱的浏览器开发工具（通常在F12上热键）来检查您想知道的元素的CSS。抱歉，我已经添加了代码。好的，我用height:100vh获得了高度；