头部不断跳出一个
元素

huangapple go评论64阅读模式
英文:

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?

enter image description here

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.

JSFiddle here

英文:

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.

JSFiddle here

答案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.

huangapple
  • 本文由 发表于 2023年2月26日 19:39:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/75571719.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定