英文:
How to divide a website into three unequal length columns
问题
我一直在尝试创建一个分为3列的网站，其中两列的宽度为15%，中间一列的宽度为70%。但是，我无法让这3列占用网站空间的100%宽度。以下是我的代码：
<!-- language: lang-css -->
body {
width: 100%;
max-width: 960px;
margin: 0;
}
div.content {
width: 100%;
display: flex;
}
div.column1 {
width: 15%;
background-color: aqua;
}
div.column2 {
width: 70%;
background-color: green;
}
navbar {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0.5rem 1rem;
}
.navbar-text {
display: inline-block;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
<!-- language: lang-html -->
<body style="padding-top: 70px">
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<img class="navbar-brand" src="img/logo.png" width="80" height="50" alt="" />
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">2</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Classes</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Gallery</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Location</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="content">
<div class="column1">
<h1> this is column 1</h1>
tting, remairem
</div>
<div class="column2">
<h1> this is column 2</h1>
Lorem Ip Lorem
</div>
<div class="column1">
<h1> this is column 1</h1>
Lorem Ipsum ing Lorem
</div>
</div>
</body>
根据你提供的代码，你希望三列占用整个网页宽度。但是，你可能忽略了默认的外边距和内边距，它们会影响到宽度的计算。你可以尝试在CSS中添加以下样式来重置外边距和内边距：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
这将确保没有任何额外的外边距或内边距干扰到你的列的宽度计算。然后，你的三列应该占用整个网页的宽度。
英文:
I have been trying to create a website divided into 3 Columns of unequal length, being more specific two of 15% in the sides, and one of 70% in the centre. However I am not being able to manage that the 3 columns take 100% width of the space of my wesbite.
Here's my code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
width: 100%;
max-width: 960px;
margin: 0;
}
div.content {
width: 100%;
display: flex;
}
div.column1 {
width: 15%;
background-color: aqua;
}
div.column2 {
width: 70%;
background-color: green;
}
navbar {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0.5rem 1rem;
}
.navbar-text {
display: inline-block;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
<!-- language: lang-html -->
<body style="padding-top: 70px">
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<img class="navbar-brand" src="img/logo.png" width="80" height="50" alt="" />
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon">2</span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Classes</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Gallery</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Location</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="content">
<div class="column1">
<h1> this is column 1</h1>
tting, remairem</div>
<div class="column2">
<h1> this is column 2</h1>
Lorem Ip Lorem</div>
<div class="column1">
<h1> this is column 1</h1>
Lorem Ipsum ing Lorem</div>
</div>
<!-- end snippet -->
As you can see I have on top of my body a fixed navbar that was imported from bootstrap from dreamweaver,
and the a new div containing the three columns.
With this code I get the following output:
Do you guys know why the columns are not taking 100% width of the website?
答案1
得分: 0
100%的宽度在这里不起作用，因为div.content的父级是页面主体。如果父级已经设置了一些宽度，那么任何%的宽度都可以工作，因此CSS有一些值可以计算%。在这种情况下，由于您希望它覆盖整个页面，并且该div没有父级，最简单的做法是将%更改为vw。
vw代表视窗宽度，表示整个页面宽度的%（而不是父级）。
div.content {
width: 100vw;
display: flex;
}
英文:
Width of 100% wont work here, because parent of div.content is page body. Width of any % works, if the parent has already some width set, so the CSS has some value to calculate the % of. In this case, since you want it to cover the whole page, and the div does not have a parent, the easiest thing to do is to change % to vw.
vw stands for viewport-width and represents % of the whole page width (not parent).
div.content{
width:100vw;
display:flex;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论