英文:
Width in CSS set to 100% but it only take 80%
问题
我正在尝试在头部创建一个头部，其中包含两个框1、2。在框1内部，有另外两个框A1、A2。不知道为什么，但是即使我将宽度设置为100%，容器的长度仍然不占据整个屏幕，而是占据了85%的屏幕。
.Header-Fixed {
position: sticky;
z-index: 998;
background-color: #FFFFFF;
outline-style: solid;
padding: 4em;
outline-color: #E5E0FF;
outline-width: 0.5px;
width: 100%;
}
.container {
width: 100%;
padding: 1em;
outline-style: solid;
outline-color: green;
align-items: center;
}
<header>
<div className='Header-Fixed'>
<div className='container'>
</div>
</div>
</header>
你能告诉我为什么会发生这种情况吗？我是前端的初学者。
英文:
I am trying to create header inside the header it has two box 1, 2. Inside box 1 it has two other box A1, A2. Don't know why but I can not set the length container full length of screen even though I set the width for it is 100% it still take 85% screen.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.Header-Fixed {
position: sticky;
z-index: 998;
background-color: #FFFFFF;
outline-style: solid;
padding: 4em;
outline-color: #E5E0FF;
outline-width: 0.5px;
width: 100%;
}
.container {
width: 100%;
padding: 1em;
outline-style: solid;
outline-color: green;
align-items: center;
}
<!-- language: lang-html -->
<header>
<div className='Header-Fixed'>
<div className='container'>
</div>
</div>
</header>
<!-- end snippet -->
Could you show me why this happens? I am beginner with Front End.
答案1
得分: 1
尝试在.container 盒子上设置 padding，而不是在.Header-Fixed 盒子上像这样：
.Header-Fixed{
/* padding: 4em; /* 移除这部分 */
}
.container {
padding: 5em; /* 在这里设置 padding */
}
另外，如果其他父元素（如 <body> 等）上有 padding，可能会阻止它占据整个屏幕宽度。
英文:
Try setting padding on the .container box instead of the .Header-Fixed box like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.Header-Fixed{
/* padding: 4em; /* remove this */
}
.container {
padding: 5em; /* just use padding here */
}
<!-- end snippet -->
Also, if there is padding on any other parent elements (like <body>, etc.), that could be preventing it from taking up 100% of the screen width.
答案2
得分: 1
.Header-Fixed {
position: sticky;
z-index: 998;
background-color: #FFFFFF;
outline-style: solid;
padding: 4em; /* 移除此部分 */
outline-color: #E5E0FF;
outline-width: 0.5px;
width: 100%;
}
.container {
width: 100%;
padding: 1em; /* 如果要保留垂直内边距但使其占据100%的宽度，请更改为 "padding: 1em 0;" */
outline-style: solid;
outline-color: green;
align-items: center;
}
html {
padding: 0; /* 这将移除页面边缘和内容之间的奇怪间距 */
}
<header>
<div class='Header-Fixed'>
<div class='container'>
</div>
</div>
</header>
英文:
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
.Header-Fixed {
position: sticky;
z-index: 998;
background-color: #FFFFFF;
outline-style: solid;
padding: 4em; /* Remove this */
outline-color: #E5E0FF;
outline-width: 0.5px;
width: 100%;
}
.container {
width: 100%;
padding: 1em; /* Change this to "padding: 1em 0;" if you want to keep the vertical padding but make it take up 100% of the width" */
outline-style: solid;
outline-color: green;
align-items: center;
}
html {
padding: 0; /*This will remove the weird spacing between the edges of your page and your content */
}
<!-- language: lang-html -->
<header>
<div class='Header-Fixed'>
<div class='container'>
</div>
</div>
</header>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论