如何创建一个非常简单的2列网站？ [英] How to create a very simple 2 column website?
问题描述
我正在尝试编写一个不滚动的目标网页，只有两列。左列是40％并且有文本，右列显然是60％并且有一个图像，两列都是100％高并且始终适合浏览器的大小，直到移动或<600px宽，我会堆叠它们。
我无法弄清楚怎么办才能使两列高度达到100％并对浏览器宽度/高度做出响应并删除滚动。
一个完美的例子是 thehustle.co 虽然他们似乎不是两个专栏，你明白了。
我不知道我是否走在正确的轨道上并且绝不是html / css的专家。希望有人可以帮我或者给我一个好的YouTube视频。
谢谢！
< b>我尝试了什么：
我试过< div class =split left和< div class =split rightwith以下CSS。
I am trying to code a landing page that doesn't scroll and just has two columns. The left column is 40% and has text, the right column is obviously 60% and has an image and both columns are 100% high and always fit to the size of the browser until mobile or <600px wide, I would stack them.
What I can't figure out how to do is get the two columns to be 100% height and be responsive to the browser width/height and remove the ability to scroll.
A perfect example is thehustle.co although theirs doesn't appear to be two columns, you get the idea.
I don't know if I'm on the right track and am by no means an expert at html/css. Hoping someone can help me out or point me to a good YouTube video.
Thanks!
What I have tried:
I have tried <div class ="split left" and <div class ="split right" with the following CSS below.
.splt {
height: 100%;
width: 40%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #fff
}
.right {
right: 0;
background-color: #000
}
推荐答案
只要你能放弃sup对于IE10及更早版本的端口，您可以使用Flexbox轻松完成此操作：
So long as you can drop support for IE10 and earlier, you can use Flexbox to do this very easily:
@media (min-width: 600px) {
html,
body {
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
display: flex;
}
.left,
.right {
padding: 10px;
}
.left {
width: 40vw;
background-color: #eff;
}
.right {
flex-grow: 1;
background-color: #ffe;
}
}
演示 [<小时ef =https://jsfiddle.net/s4gbd2be/target =_ blanktitle =New Window> ^ ]
flexbox的基本概念 - CSS | MDN [ ^ ]
Flexbox完整指南CSS-Tricks [ ^ ]
我可以使用...... Flexbox [ ^ ]
Demo[^]
Basic concepts of flexbox - CSS | MDN[^]
A Complete Guide to Flexbox | CSS-Tricks[^]
Can I use... Flexbox[^]
您也可以使用bootstrap
这是一个例子：
cp_full_height - JSFiddle [ ^ ]
完整代码：
You also can use bootstrap
Here is an example:
cp_full_height - JSFiddle[^]
full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<title></title>
<style>
.fill {
height: 100vh;
}
.leftBgColor, .rightBgColor {
height: 100vh;
background: red;
}
.rightBgColor {
background: blue;
}
</style>
</head>
<body>
<div class="container-full fill">
<div class="row">
<div class="col-sm-4 leftBgColor">
40%
</div>
<div class="col-sm-8 rightBgColor">
60%
</div>
</div>
</div>
</body>
</html>
这篇关于如何创建一个非常简单的2列网站？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
