英文:
Header keeps ticking out of a div
问题
以下是翻译的内容:
我正在创建一个网站。该网站顶部应该有一个始终可见的条。到目前为止,我在顶部的条内放置了一些按钮、图像和标题。顶部的条是一个 div,因此我无法理解为什么我的标题会超出顶部的条。
如何确保我的标题保持在 div 内并随着页面变小而变小?
以下是我的顶部条(header-div)、按钮和标题的代码。
.Header-div {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 7vh;
background-color: white;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
z-index: 9999;
}
.Kalender, .Info {
font-size: 1em;
width: 5%;
height: 75%;
margin-left: 2%;
margin-right: 0.1%;
margin-bottom: 5vh;
display: inline-block;
vertical-align: middle;
cursor: pointer;
white-space:
overflow: hidden;
text-overflow:
}
.Header1 {
position: fixed;
font-size: 2.5em;
font-family: sans-serif;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
left: 30%;
right: 30%;
}
希望这对您有所帮助。
英文:
I am in the process of creating a website. The website should have a bar at the top that is constantly visible. So far I have placed some buttons, an image and a headline inside the bar at the top. The bar at the top is made as a div and therefore I can't understand how my headline keeps ticking out below the bar at the top(div).
How do I make sure my headline stays inside my div and gets smaller as the page gets smaller?
Code shown below is for my bar (header-div), button and the header itself.
`.Header-div {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 7vh;
background-color: white;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
z-index: 9999;
}
.Kalender, .Info {
font-size: 1em;
width: 5%;
height: 75%;
margin-left: 2%;
margin-right: 0.1%;
margin-bottom: 5vh;
display: inline-block;
vertical-align: middle;
cursor: pointer;
white-space:
overflow: hidden;
text-overflow:
}
.Header1 {
position: fixed;
font-size: 2.5em;
font-family: sans-serif;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
left: 30%;
right: 30%;
}`
答案1
得分: 1
Firstly: you're specifying both .Header-div
and .Header
with position: fixed
, so they're both positioned relative to the page.
Secondly: you're specifying a fixed height on the .Header-div
which happens to be less than the height required to display its contents. The default rule is overflow: visible
, which gives you the behaviour you see here.
If you remove the position: fixed
rule for .Header
and the height
on .Header-div
, then the height of .Header-div
depends only on its contents.
This messes up your alignment on the inner div, but change display: inline-flex
to display: flex
and you're all good.
英文:
Firstly: you're specifying both .Header-div
and .Header
with position: fixed
, so they're both positioned relative to the page.
Secondly: you're specifying a fixed height on the .Header-div
which happens to be less than the height required to display its contents. The default rule is overflow: visible
, which gives you the behaviour you see here.
If you remove the position: fixed
rule for .Header
and the height
on .Header-div
, then the height of .Header-div
depends only on its contents.
This messes up your alignment on the inner div, but change display: inline-flex
to display: flex
and you're all good.
答案2
得分: 0
如座右铭所示,有许多可以使用给定的CSS做的事情。但是实现响应式字体大小也可以非常容易地通过使用vw单位而不是像您所做的那样使用em
来实现。vw
代表“视口宽度”,即当前浏览器窗口大小的百分比。
对我来说,这非常容易且非常可伸缩,它只有一些与某些浏览器相关的少许限制。
英文:
As the motto's answer suggest, there are plenty of things to do with the given CSS. But responsive font size can also be achieved quite easilly itself by using vw units instead of em
like you do. A vw
stands for "viewport width", which is percentage of current browser window size.
For me it is super-easy and super-scalable, it only has a few limitations related to some browsers.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论