sticky footer with fixed navbar boxing

25 Νοεμβρίου 2018

Καλησπέρα σε όλους!
πως μπορώ να κάνω sticky footer with fixed navbar boxing

http://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>sticky footer with fixed navbar boxing</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <style>
	/* Sticky footer styles
	-------------------------------------------------- */
	html {
	  position: relative;
	  min-height: 100%;
	}
	body {
	  /* Margin bottom by footer height */
	  margin-bottom: 60px;
	}
	.footer {
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	  /* Set the fixed height of the footer here */
	  height: 60px;
	  background-color: #f5f5f5;
	}


	/* Custom page CSS
	-------------------------------------------------- */
	/* Not required for template or sticky footer method. */

	body > .container {
	  padding: 60px 15px 0;
	}
	.container .text-muted {
	  margin: 20px 0;
	}

	.footer > .container {
	  padding-right: 15px;
	  padding-left: 15px;
	}

	code {
	  font-size: 80%;
	}
      
    #container {
      background: #fff;
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
      overflow: hidden;
      box-shadow: 0 0 12px #aaa;
      -webkit-box-shadow: 0 0 12px #aaa;
      -moz-box-shadow: 0 0 12px #aaa;
      -o-box-shadow: 0 0 12px #aaa;
      -ms-box-shadow: 0 0 12px #aaa;
  	}
	</style>
	
  </head>

  <body>

  <div id="container">
	<!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer with fixed navbar</h1>
      </div>
      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer class="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>
	
  </div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Ευχαριστώ!

Επεξ/σία 25 Νοεμβρίου 2018 από Επισκέπτης

XPHSTOS_ · 25 Νοεμβρίου 2018

Ποιο είναι το πρόβλημα? Δεν καταλαβαίνω...
Επίσης ανέβασε τον κώδικα σε codepen ή jsfiddle.

25 Νοεμβρίου 2018

59 λεπτά πριν, XPHSTOS_ είπε

Ποιο είναι το πρόβλημα? Δεν καταλαβαίνω...
Επίσης ανέβασε τον κώδικα σε codepen ή jsfiddle.

https://jsfiddle.net/vk6b40zm/ θέλω το footer να είναι κάτω και όχι πάνω

τώρα είναι έτσι

εγώ θέλω έτσι να είναι

XPHSTOS_ · 26 Νοεμβρίου 2018

1) Το height στo HTML, πρέπει να είναι height: 100%; (όχι min-height).
2) height: 100% στο body.
3) height: 100% στο .container.
4) height: 100% στο #container.

Εναλλακτικά, κάνε το footer, position: fixed; και άλλαξε λίγο το styling για να το φέρεις όπως θέλεις εμφανισιακά.
Βγάλε το position: relative από το #container.

Επεξ/σία 26 Νοεμβρίου 2018 από XPHSTOS_

tzotzosgr · 26 Νοεμβρίου 2018

Καλησπέρα,
άλλαξε όλο το style με τον παρακάτω κώδικα

html,body {
  height: 100%
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

.container .text-muted {
  margin: 20px 0;
}

.footer>.container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}

#container {
  background: #fff;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  overflow: hidden;
  box-shadow: 0 0 12px #aaa;
  -webkit-box-shadow: 0 0 12px #aaa;
  -moz-box-shadow: 0 0 12px #aaa;
  -o-box-shadow: 0 0 12px #aaa;
  -ms-box-shadow: 0 0 12px #aaa;
  min-height: 100%;
  padding-bottom: 70px;
}

26 Νοεμβρίου 2018

17 λεπτά πριν, tzotzosgr είπε

Καλησπέρα,
άλλαξε όλο το style με τον παρακάτω κώδικα


html,body {
  height: 100%
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

.container .text-muted {
  margin: 20px 0;
}

.footer>.container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}

#container {
  background: #fff;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  overflow: hidden;
  box-shadow: 0 0 12px #aaa;
  -webkit-box-shadow: 0 0 12px #aaa;
  -moz-box-shadow: 0 0 12px #aaa;
  -o-box-shadow: 0 0 12px #aaa;
  -ms-box-shadow: 0 0 12px #aaa;
  min-height: 100%;
  padding-bottom: 70px;
}

δουλεύει μια χαρά! 😃
Thanks tzotzosgr

Σύνδεση

sticky footer with fixed navbar boxing

Προτεινόμενες αναρτήσεις

Επισκέπτης

XPHSTOS_

Επισκέπτης

XPHSTOS_

tzotzosgr

Επισκέπτης

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση