Блог

Скриншот страницы

Когда содержимого нет, мой нижний колонтитул с помощью панели приложений неправильно переходит в конец страницы, только в конец содержимого. Я хочу, чтобы он располагался в нижней части страницы, если содержимое не доходит до нижней части страницы, но если содержимое выходит за пределы экрана, я хочу, чтобы оно находилось в нижней части этого содержимого.

В настоящее время он находится правильно в нижней части содержимого, когда содержимое выходит за пределы экрана, но он не находится в нижней части страницы, когда содержимое не достигает нижней части экрана.

 const Footer = () =gt; {  return (  lt;AppBar position='sticky' sx={{ top: 'auto', bottom: 0 }}gt;  lt;Grid container direction='column'gt;  lt;Grid item containergt;  lt;Grid item xs={0} sm={1} /gt;  lt;Grid item xs={12} sm={10}gt;  lt;h1gt; info sectionlt;/h1gt;  lt;/Gridgt;  lt;Grid item xs={0} sm={1} /gt;  lt;/Gridgt;  lt;Grid item containergt;  lt;Grid item xs={0} sm={1} /gt;  lt;Grid item xs={12} sm={10}gt;  lt;Toolbar disableGutters={true}gt;  lt;h1gt;bottom toolbarlt;/h1gt;  lt;/Toolbargt;  lt;/Gridgt;  lt;Grid item xs={0} sm={1} /gt;  lt;/Gridgt;  lt;/Gridgt;  lt;/AppBargt;  ) }  

Таким образом, возможным наилучшим решением этой проблемы должно быть установление минимальной высоты области содержимого страницы, исключающей высоту верхнего и нижнего колонтитулов. Пожалуйста, проверьте код ниже. Ваш подход — это не то решение, которое вы ищете. Надеюсь, это поможет вам понять мой подход.

 /* Ganeral Style */ *{  box-sizing: border-box;  margin: 0;  padding: 0; } div{  background-color: blueviolet;  padding: 30px;  height: 100px;  color: white;  display: flex;  justify-content: center;  align-items: center;  border: 1px solid darkturquoise; } /* Style for solution */ .content{  min-height: calc(100vh - 200px);/* header   footer = 200px */  /*height: 800px;*/ /* To test if the content extend over the page */ } .footer{} .header{} 

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt;  lt;titlegt;Documentlt;/titlegt; lt;/headgt; lt;bodygt;   lt;div class="header"gt;Headerlt;/divgt;  lt;div class="content"gt;Contentlt;/divgt;  lt;div class="footer"gt;footerlt;/divgt;   lt;/bodygt; lt;/htmlgt;