Margin-top: авто, но минимум 50 пикселей
Я хотел бы применить автоматическое верхнее поле к тегу нижнего колонтитула, но с минимальным размером поля 50 пикселей (оно не может быть меньше 50 пикселей). Я пробовал использовать функцию min() в CSS, но не могу решить проблему. Я не знаю, упускаю ли я что-то или есть другой правильный способ сделать это.
* {
--red: #f70000;
--gold: #caa866;
--blue: #004d96;
--BGblue: #004d96ef;
--white: rgb(230, 230, 230);
--traswhite: rgba(235, 235, 235, 0.5);
--black: rgb(20, 20, 20);
--trasblack: rgba(20, 20, 20, 0.6);
--warning: #CC3300;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
background-color: var(--white);
display: flex;
flex-direction: column;
transition: all ease-in-out 0.3s;
}
footer {
display: flex;
flex-direction: row;
margin-top: 50px;
width: 100%;
height: 200px;
background-color: var(--black);
transition: all ease-in-out 0.3s;
}<footer>
<p style = "color: white">elements in the footer</p>
</footer>но с отступом минимум 50px (оно не может быть меньше 50px)" - и исходя из чего именно оно должно стать больше...? «Я пробовал использовать функцию min() в CSS, но не могу решить проблему» — ну, для этого потребуется как минимум два «аргумента». 50 пикселей были бы одним из них, но что было бы другим...?
Пожалуйста, не могли бы вы добавить минимальный воспроизводимый пример, чтобы мы могли увидеть, что у вас есть на данный момент? (Используйте фрагмент. Кнопка <>)
@TemaniAfif не работает по двум основным причинам: во-первых, граница будет внутри моего тега нижнего колонтитула. Во-вторых, если бы я использовал «контур» вместо границы (чтобы нарисовать ее за пределами нижнего колонтитула), он бы перекрыл другие элементы на странице, не перемещая их. Спасибо, кстати!
... и именно поэтому вам следует для начала добавить минимально воспроизводимый пример вашей ситуации - чтобы нам не приходилось выяснять, почему конкретные подходы могут не работать один за другим, когда вы говорите: «Ох и вот еще одна мелочь, о которой я совершенно забыл упомянуть изначально..."
@CBroe, проблема в том, что мне приходится прикреплять нижний колонтитул внизу страницы, которая не полна «вещей». 'до этого момента проблем не было, это было бы легко, но проблемы возникают, когда на этой странице есть кнопки, которые вызывают появление элементов. Поэтому, когда эти элементы появляются, мне приходится сохранять нижний колонтитул внизу, но с отступом в 50 пикселей от содержимого страницы.
@evolutionxbox, я собираюсь сделать это через несколько минут, кстати, спасибо за помощь! (впервые использую stackoverflow, чтобы спросить, так что я новичок в функциях, которые могу использовать!)
@evolutionxbox фрагмент, который я вставил, представляет собой грубое обобщение того, что у меня сейчас есть в моем файле стиля CSS для нижнего колонтитула. Если вам нужно больше, я могу также вставить стили body и html.
Вы сейчас показали нам только нижний колонтитул, поэтому до сих пор неясно, от чего он должен держаться на определенном минимальном расстоянии.
@CBroe должен сохранять минимум 50 пикселей от всего, что находится над ним. В некоторых случаях это кнопка, в других случаях — пролет, в третьих — img. Если это может быть полезно, я могу отправить всю страницу во фрагменте.
Я предполагаю, что вам нужна здесь очень «классическая» вещь, где нижний колонтитул всегда находится внизу экрана, если основного контента мало, и сдвигается вниз, если его больше? stackoverflow.com/a/55542885/1427878 — добавление дополнительного поля-верха должно работать без проблем.
@CBroe Ваша «догадка» верна, но что вы подразумеваете под «дополнительным верхним полем»? Если вы хотите отредактировать фрагмент, который вы связали со мной, добавив в нижний колонтитул «margin-top: 50px;». это не работает, к сожалению. Если вы имеете в виду что-то другое, я не совсем понял то, что вы только что объяснили :D
Второй фрагмент ответа Корбука с margin-top: 50px вместо footer должен делать именно то, что вы хотите.
@CBroe, к сожалению, нет, но я решил, большое спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если я вас правильно понимаю, вы хотите, чтобы нижний колонтитул всегда находился внизу страницы (и на расстоянии не менее 50 пикселей от основного контента), а в противном случае — внизу области просмотра.
Вы можете сделать это с помощью position:sticky, установив положение нижнего колонтитула на 100 % сверху минус высота нижнего колонтитула. НАПРИМЕР:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
background-color: #eee;
}
section {
border: 2px dotted red;
padding: 10px;
}
footer {
display: flex;
flex-direction: row;
position: sticky;
top: calc(100% - 200px);
height: 200px;
margin-top: 50px;
background-color: black;
color: white;
}<section contenteditable = "true">
I am content-editable. Type in here to simulate what happens with more page content.
</section>
<footer>
elements in the footer
</footer>да, это было именно то, что мне нужно! Большое спасибо!! Могу я спросить, что делает Calc? Еще раз спасибо!
Функция CSS Calc() позволяет выполнять вычисления при указании значений свойств CSS. См.: developer.mozilla.org/en-US/docs/Web/CSS/calc
прозрачная верхняя граница размером 50 пикселей?