HTML / CSS: как я могу задвинуть нижний колонтитул на неопределенное время? - PullRequest
Новая
       6

HTML / CSS: как я могу задвинуть нижний колонтитул на неопределенное время?

0 голосов
/ 29 апреля 2018

До сих пор мне удавалось заставить мой нижний колонтитул всегда придерживаться нижней части, однако я изо всех сил пытался заставить контент или изображения на моей веб-странице сдвинуть нижний колонтитул вниз. Я пробовал абсолютные, фиксированные, относительные позиции для нижнего колонтитула, но безрезультатно, так как содержимое класса «container2» продолжает идти под нижний колонтитул. Кроме того, он должен быть не липким нижним колонтитулом, похожим на панель навигации, а должен быть естественным нижним колонтитулом, в котором его толкает контент.

HTML / CSS: https://jsfiddle.net/jof0hzhc/2/

HTML 

<!DOCTYPE html>
<html lang="en" class="app">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>ResponsiveNav</title>
      <link rel="stylesheet" href="css/style.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <script type="text/javascript" src="js/script.js"> </script>

</head>
<body class="bg2">
    <div class="wrapper">
            <header>

                  <nav>

                        <div class="menu-icon">
                              <i class="fa fa-bars fa-2x"></i>
                        </div>

                        <div class="logo">
                              ResponsiveNav
                        </div>

                        <div class="menu">
                              <ul>
                                    <li><a href="index.html">Home</a></li> <!--Classifying the button as "activepage" will allow the button to be red when the user is on the page.-->
                                    <li><a href="apps.html" class="activepage">Current page</a></li>
                                    <li><a href="about.html">About Us</a></li>
                                    <li><a href="contact.html">Contact</a></li>
                              </ul>
                        </div>
                  </nav>

            </header>

            <section class="content">
            <p class="apphead">Heading</p>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

                <div class="container2">
                <p class="apptext">Sub-heading</p>
                    <div class="games">

                        <img src="images/1.png">
                        <img src="images/2.jpg">
                        <img src="images/3.jpg">
                        <img src="images/4.jpg">
                        <img src="images/5.jpg">
                        <img src="images/6.jpg">
                    </div>

                <br><br><br><br><br><br><br><br>

                </div>


            </section>




      </div>


<footer>
<p class="foot">
        Footer text. <br>
        __________________________________________________________________________________________________ <br> <br>

        <a href="about.html" class="inquiry">About us </a> 

        |

        <a href="contact.html" class="inquiry">Contact us</a> <br>

        __________________________________________________________________________________________________ 
        <section>
            <p class="foot">Social Media</p>
                <span class="social">
                    <a href="" target="_blank"><img src="images/mail.png" alt="Mail" width="50px" height="50px"/></a>
                    <a href="http://www.facebook.com" target="_blank"><img src="images/facebook.png" alt="Facebook" width="50px" height="50px"/></a>
                    <a href="http://www.twitter.com" target="_blank"><img src="images/twitter.png" alt="Twitter" width="50px" height="50px"/></a>
                </span>
        </section>
        <section>
            <h3>All rights reserved<br></h3>
        </section>
</p>

</footer>
</body>
</html>

CSS 

html, body {
      margin: 0;
      padding: 0;
      width: 98%;
      background-color: black;
      min-height: 100%;
}

body {
      font-family: "Helvetica Neue",sans-serif; /*Keep this font or hamburger disappears*/
      font-weight: lighter;
}

header {
      width: 98%;
      height: 13vh;

}

li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/


footer { /*How do I even make the footer always stick at the very bottom no wonder the dimensions of the browser?*/
    width:100%;
    position:absolute;
    height:300px;
    font-size: 15px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    background-color:black;
    border-width: 10px;
    color: white;


}


p {
    color: black;
    position: relative;
    margin: 5px;
    padding: 10px;
}

a { /*General styling for links to other pages or websites*/
    text-decoration:none;
    position:relative;
    font-family: Trebuchet MS, sans-serif;
}

h2 { /*Styling for site title*/
    font-size: 50px;
    text-align:left;
    color:white;
    margin: 20px;
    font-family: courier;
}

h3 {
    font-size:20px;
    padding-left:20px;
    color: white;
}




.content { /*the main container that consists of most of the existing content*/
    margin-top:5px;
    width:100%;
    height: 1400px;
    margin-left: auto;
    margin-right: auto;


}

.logo {
      line-height: 60px;
      position: fixed;
      float: left;
      margin: 16px 46px;
      color: #fff;
      font-weight: bold;
      font-size: 20px;
      letter-spacing: 2px;
}


nav {
      position: fixed;
      width: 100%;
      line-height: 60px;
      z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}

nav ul {
      line-height: 60px;
      list-style: none;
      background: black;
      overflow: hidden;
      color: #fff;
      padding: 0;
      text-align: right;
      margin: 0;
      padding-right: 40px;
      transition: 1s;
}

nav.black ul {
      background: orange;
      opacity: 10;
}

nav ul li {
      display: inline-block;
      padding: 16px 40px;;
}

nav ul li a {
      text-decoration: none;
      color: white;
      font-size: 16px;
}

.menu-icon {
      line-height: 60px;
      width: 100%;
      background: #000;
      text-align: right;
      box-sizing: border-box;
      padding: 15px 24px;
      cursor: pointer;
      color: orange;
      display: none;
}

.activepage { 
    font-size: 25px;
    color: red;
    text-decoration: underline;
}

.welcome {
    font-family: courier;
}

.inquiry {
    font-size: 17px;
    color: white;
}


.container2 {
    background-color: darkgrey;
    padding: 10px;
    margin: 0;
    width: 97.8%;
    height: 1000px;
    z-index: 0;
    position:absolute;
    overflow:hidden;

}

p.heading {
    font-size: 25px;
    font-weight: bold;
    font-family: courier;
}

.foot {
    color: white;

}

.bg2 {
    background-image:url("hex.jpg");
    height: 550px;
    width: 102%;


}

.apphead {
    color: white;
    font-size: 100px;
    font-family: courier;
}

.apptext {
    color:white;
    font-size: 45px;
    font-weight: bold;
    font-family: courier;

}

.games {
    margin:0;
    position:relative;
    border:solid white; 
}

.games img {
    width: 640px;
    height:250px;
    padding: 5px;
    transition: 1s;

}

.games img:hover {
    transform: scale(1.1);
}

.item img{
    display:block;
}


@media(max-width: 786px) {

      .logo {
            position: fixed;
            top: 0;
            margin-top: 16px;
      }

      nav ul {
            max-height: 0px;
            background: #000;
      }

      nav.black ul {
            background: #000;
      }

      .showing {
            max-height: 34em;
      }

      nav ul li {
            box-sizing: border-box;
            width: 100%;
            padding: 24px;
            text-align: center;
      }

      .menu-icon {
            display: block;
      }

}

Ответы [ 4 ]

0 голосов
/ 29 апреля 2018
  1. Вам нужно установить min-height для html, body {min-height: 100vh;}
  2. Установить footer как position: fixed; bottom: 0; left: 0;

Надеюсь, это поможет вам.

0 голосов
/ 29 апреля 2018

Прежде всего, я немного запутался, почему вы так часто используете тег <br>, но похоже, что вы пытаетесь разместить элементы вместе с ними. Вы можете использовать для этого отступы или поля.

Наконец, я думаю, что вы ищете position: fixed. Попробуйте это: 

footer { 
  width:100%;
  position: fixed; /* use fixed instead of absolute */
  bottom: 0; /* set bottom to 0 */
  height:300px;
  font-size: 15px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  background-color:black;
  border-width: 10px;
  color: white;
}
0 голосов
/ 29 апреля 2018

Есть некоторые вещи, которые вы должны изменить 1. Вы используете абсолютное положение вне относительного 2. Использование абсолютных значений для высоты не является хорошей практикой 3. Всегда лучше использовать отступы и поля для создания пробела. Сохраняйте фиксированное положение только для навигации по заголовку и закомментируйте все фиксированные значения высоты (px) и абсолютное и относительное позиционирование для начала. Абсолютная позиция должна быть внутри относительной, если нет особой причины не делать этого. Чтобы выйти из основной проблемы, начните с нижнего колонтитула и container2. Но есть еще много чего исправить.

0 голосов
/ 29 апреля 2018

У вас есть несколько проблем в вашем CSS. Основная проблема, из-за которой ваш контент не появляется, заключается в том, что вы используете overflow: hidden; в container2 и height: 1000px;, поэтому все, что превышает 1000px, не будет отображаться. Попробуйте удалить overflow: hidden или overflow: x-scroll.

Это документация для свойства переполнения, я предлагаю вам прочитать его для лучшего понимания вашей проблемы. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

...