Предотвращение перекрытия div только при изменении размера окна (со стилизованными компонентами)
У меня есть компонент заголовка, у которого есть заголовок слева и несколько ссылок справа от страницы. Размер и положение этих div (частично) адаптируются, и я доволен тем, как они перемещаются, когда я изменяю размер окна. Однако я хотел бы, чтобы левый div выступал в качестве стены для других. Например, когда я изменяю размер своего окна до очень маленького, ссылки «попадают» в заголовок и только затем начинают переноситься на несколько строк. Как я могу это сделать?
<html>
<head>
<style>
.body {
position: fixed;
top: 0;
background-color: lightgoldenrodyellow;
box-sizing: border-box;
width: 100vw;
height: calc(2% + 75px);
z-index: 10000;
}
.titleContainer {
position: fixed;
left: 0;
display: flex;
align-items: center;
font-size: calc(18px + 0.5vw);
width: 250px;
min-width: 200px;
height: calc(2% + 75px);
transition: 0.3s;
margin-left: 10px;
}
.titleContainer:hover{
cursor: pointer;
}
#title {
margin-right: auto;
padding-left: 5px;
text-decoration: none;
font-size: 32px;
font-weight: 750;
font-family: Arial, Helvetica, sans-serif;
}
.pageLinkContainer {
position: fixed;
right: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: calc(2% + 75px);
width: auto;
}
.pageLink {
margin-right: 10px;
margin-left: 2px;
font-size: calc(12px + 0.3vw);
}
</style>
</head>
<body>
<div className = "titleContainer">
<h3><Link id = "title" to = "/" >TITLE</Link></h3>
</div>
<div className = "pageLinkContainer">
<Link className = "pageLink" to = "/upload">Upload a funny Gif</Link>
<Link className = "pageLink" to = "/gifs"> Look at funny Gifs</Link>
<Link className = "pageLink" to = "/database">Database</Link>
</div>
</body>
</html>РЕДАКТИРОВАТЬ № 3:
Согласно ответу Ниво ниже, вот мой текущий css. Я использую стилизованные компоненты, которые создают тело в качестве оболочки вокруг компонента. Я попытался объяснить поток страницы как можно яснее. Еще одна идея, которая у меня была, заключалась в том, чтобы использовать window.innerWidth, чтобы ссылки исчезали при изменении размера окна.
Я обновил этот CSS до рабочего ответа, для всех, кто хочет знать. Я также добавил обратно свои стилизованные компоненты (которые я удалил, чтобы удалить React из этого). Все заслуги, конечно же, принадлежат Ниво.
CSS
//GLOBAL STYLE
const GlobalStyle = createGlobalStyle`
body {
margin: 0;
padding: 0;
background-color: rgba(0,0,50,0.3);
height: 100%;
width: 100%;
position: absolute;
}
`
//GLOBAL CONTAINER
//A WRAPPER-DIV AROUND ALL COMPONENTS
const GlobalContainer = styled.div`
{
height: 100%;
width: 100%;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
`
//HEADER COMPONENT
//ANOTHER WRAPPER-DIV JUST FOR THIS COMPONENT
const HeaderStyle = styled.div`
{
position: fixed;
top: 0;
display: flex;
justify-content: space-between;
background-color: rgba(100,200,100,0.6);
width: 100vw;
height: calc(2% + 75px);
z-index: 10000;
}
.titleContainer {
display: flex;
flex-shrink: 0;
align-items: center;
font-size: calc(18px + 0.5vw);
width: 250px;
transition: 0.3s;
margin-left: 10px;
}
.titleContainer:hover{
cursor: pointer;
}
#title {
text-decoration: none;
font-size: 32px;
font-weight: 750;
font-family: Arial, Helvetica, sans-serif;
}
.pageLinkContainer {
right: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: calc(2% + 75px);
}
.pageLink {
white-space: nowrap;
margin: 0 0.5rem;
font-size: calc(12px + 0.3vw);
}
`
HTML
<GlobalStyle />
<GlobalContainer>
<HeaderStyle>
<div className = "titleContainer">
<h3><Link id = "title" to = "/" >Movie Scores</Link></h3>
</div>
<div className = "pageLinkContainer">
<Link className = "pageLink" to = "/upload">Upload a funny Gif</Link>
<Link className = "pageLink" to = "/gifs"> Look at funny Gifs</Link>
<Link className = "pageLink" to = "/database">Movies We've Seen</Link>
</div>
</HeaderStyle>
</GlobalContainer>
Ответы 1
Используйте flexbox, чтобы другие элементы не перекрывались.
Если вам нужно решение на скрипке, оно прямо здесь: https://jsfiddle.net/Niwo04/o1df63L2/1/
Я немного подчистил ваш код и заменил ваш материал React обычным HTML (потому что я ничего не знаю о React). Я также немного раскрасил, потому что подумал, что это может сделать все визуально более понятным.
Если у вас есть какие-либо вопросы о моих изменениях, не стесняйтесь отвечать на этот ответ; )
body {
margin: 0;
background-color: darkgray;
}
.body {
position: fixed;
display: flex;
justify-content: space-between;
background-color: lightgoldenrodyellow;
width: 100vw;
height: 75px;
z-index: 10000;
}
.titleContainer {
display: flex;
align-items: center;
width: 250px;
background-color: red;
flex-shrink: 0;
}
.pageLinkContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-color: blue;
}
.pageLink {
white-space: nowrap;
margin: 0 0.5rem;
}<html>
<body>
<div class = "body">
<div class = "titleContainer">
<h3>TITLE</h3>
</div>
<div class = "pageLinkContainer">
<a class = "pageLink">Upload a funny Gif</a>
<a class = "pageLink">Look at funny Gifs</a>
<a class = "pageLink">Database</a>
</div>
</div>
</body>
</html>Здравствуйте, daritimm, сначала вам нужно знать, что flexbox не работает, если вы фиксируете элементы. Но я думаю, что у нас не тот же HTML, потому что в вашем исходном сообщении этот класс называется «тело», но нет элемента, к которому прикреплен этот класс, и когда я писал свой ответ, я добавил div с этим классом как окружающий элемент для вашего заголовка и ваших ссылок. Этот div в основном является основным элементом flexbox, который управляет положением заголовка и ссылок. Не могли бы вы также обновить HTML в своем посте, чтобы я мог работать с текущей версией вашего HTML и CSS.
Привет, Ниво, я вижу о фиксированных элементах. Но если я не исправлю заголовок, он не прилипнет к верху. Как мы можем это сделать? Что касается тела: у меня есть элемент под названием <HeaderStyle>, который является стилизованным компонентом для React. По сути, это оболочка для этого конкретного «компонента», т.е. Заголовок, который работает как тело афаик. Однако, если я добавлю отдельный body-div, куча вещей перестанет работать, так что это может быть чем-то, что мне нужно изучить.
По сути, если я уберу position: fixed, то произойдет то, что заголовок опустится ниже, потому что вся страница находится в режиме гибкости (через глобальную таблицу стилей). Я постараюсь добавить это в свой пост, хотя, должен признать, он становится немного грязным.
Это похоже на ваш текущий HTML и CSS (jsfiddle.net/Niwo04/p9vgyLox/24)? Если да, то я могу согласиться, что вам нужно position: fixed прикрепить элемент с классом "another-styled-div" вверху, но тогда вам не нужно position: fixed для вашего заголовка и ссылок, потому что "other-styled- div" удерживает их вверху страницы. Мне действительно нужен ваш текущий HTML, а не только CSS, потому что в вашем исходном сообщении нет «другого-стилизованного-div» или «основного-стилизованного-div».
Привет, Ниво, большое спасибо, что остался со мной здесь. Вы исправили это! Ваш пример в точности как мой скрин, да. Удаление position: fixed из заголовка и ссылок работает отлично. Очень рад узнать, что flexbox и position fixed нельзя использовать одновременно. Если бы я мог проголосовать дважды, я бы это сделал.
Спасибо. Я рад, что это помогло вам и что вы знаете немного больше о фиксированных панелях навигации с помощью flexbox. Лучше знать, почему ответ работает, чем просто использовать его, не зная, что именно происходит в коде. Я желаю вам больших успехов в вашем проекте и всегда не стесняйтесь спрашивать снова, если у вас возникли проблемы с вашим кодом; )
Привет! У меня это не работает, хотя ваш пример на jsfiddle - это то, что мне нужно! Я отредактировал свой пост выше с кодом обновления. Ссылки на страницы по-прежнему скользят под заголовком слева, когда я изменяю размер окна. Также мне пришлось закрепить их справа с помощью right: 0, иначе они как-то не остались бы в шапке.