• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Co zrobić, aby stopka przylegała do samego dołu strony?

0 głosów
78 wizyt
pytanie zadane 16 maja 2020 w HTML i CSS przez Goszczu31 Nowicjusz (160 p.)

Sprawa wygląda tak https://codepen.io/Goszczu31/pen/KKdGavq, a chciałbym osiągnąć efekt bez przestrzeni pod stopką.

<!DOCTYPE html>
<html lang="pl">

  <head>

     <meta charset="utf-8">
     <title>Logistyka mojego działania podczas zdalnego nauczania!</title>

     <meta name="description" content="Logistyka mojego działania podczas zdalnego nauczania !">
     <meta name="keywords" content="logistyka, zdalne nauczanie, logistyka zdalnego nauczania, Logistyka mojego działania podczas zdalnego nauczania">
     <meta name="author" content="Michał Goszczyński">

     <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
     <link rel="shortcut icon" href="img/ico.png">
	 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
	 <link rel="stylesheet" href="main.css">
	 <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600&display=swap" rel="stylesheet">
	 
	 
  </head>
  <body>
  
	<!-- nawigacja -->
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse justify-content-md-center " id="navbarsExample08">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="Rozwiń" id="dropdown08" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Efektywna nauka</a>
            <div class="dropdown-menu" aria-labelledby="dropdown08">
              <a class="dropdown-item" href="#">Cechy, które musimy poruszyć</a>
              <a class="dropdown-item" href="#">Różnice</a>
              
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="Rozwiń" id="dropdown08" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Harmonogram</a>
                <div class="dropdown-menu" aria-labelledby="dropdown08">
                  <a class="dropdown-item" href="#">Potrzeby i obszary działania</a>
                  <a class="dropdown-item" href="#">Plan dnia</a>
          
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="Rozwiń" id="dropdown08" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Analiza i Synteza</a>
            <div class="dropdown-menu" aria-labelledby="dropdown08">
              <a class="dropdown-item" href="#">Co lepsze / fajniejsze / trudniejsze / beznadziejne</a>
              <a class="dropdown-item" href="#">Posiadane zasoby działania</a>

            </div>
          </li>
        </ul>
      </div>
    </nav>

	<div id="container">
	
	
	<!-- slider -->
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
	  <img src="img/tlo slidera.jpg" alt="">
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"/></svg>
        <div class="container">
          <div class="carousel-caption text-left">
            <h1>Jak efektywnie uczyć się w domu?</h1>
            <p>#Logistyka mojego działania podczas zdalnego nauczania!</p>
            <p><a class="btn btn-lg bg-info" href="#" role="button">Czytaj dalej</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
	  <img src="img/tlo slidera 2.jpg" alt="">
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"/></svg>
        <div class="container">
          <div class="carousel-caption">
            <h1>Stwórz własny harmonogram nauki</h1>
			<br/><br/>
            <p><a class="btn btn-lg bg-info" href="#" role="button">Do dzieła</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
	  <img src="img/science.jpg" alt="">
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"/></svg>
        <div class="container">
          <div class="carousel-caption text-right">
            <h1>Przeanalizuj swój plan</h1>
            <p>Zrób analizę i syntezę danych</p>
            <p><a class="btn btn-lg bg-info" href="#" role="button">Do dzieła</a></p>
          </div>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  
	  <!--spis treści-->
		<section class="spis">
		
			<div class="">
			
				<ol class="spis-tresci">
				
					<li>Efektywna nauka</li>
					
						<ul>
						
							<li><a href="#">Cechy, które musimy poruszyć</a></li>
							<li><a href="#">Różnice pomiędzy początkiem, kolejnym tygodniem nauki zdalnej</a></li>
						
						</ul>
					
					<li>Harmonogram/plan</li>
					
							<ul>
							
								<li><a href="#">Identyfikacja potrzeb i obszarów działania</a></li>
								<li><a href="#">Plan dnia: praca, relaks i jego sposoby</a></li>
							
							</ul>
							
					<li>Analiza i synteza</li>
					
							<ul>
							
								<li><a href="#">Co jest łatwiejsze, fajniejsze, a co trudniejsze i beznadziejne przy zdalnej nauce</a></li>
								<li><a href="#">posiadane zasoby do działania: ludzkie, informacyjne, finansowe i rzeczowe w odniesieniu do domu, rodzeństwa, pokoju pracy</a></li>
							
							</ul>
					
				</ol>
			
			</div>
			
		
		</section>
  <main role="main">

    <div class="linia"></div>

			<!-- efektywna nauka -->
		<div class="tematy">
			<section id="temat 1">
				
				<article><p>Aby efektywnie uczyć się w domu potrzebna jest samodyscyplina i zaangażowanie, mile widziane są też chęci do nauki, które nie występują u wszystkich, nie można odkładać prac na ostatnią chwilę, ale nie robić też wszystkiego na raz bez przerwy.</p></article>
				<article><p>Na początku wszystko nie było dobrze zorganizowane i nie było dużo do zrobienia, ale z czasem dochodziły kolejne prace, i lekcje online, najpierw mieliśmy jedną w tygodniu (geografię), później dwie trzy tygodniowo. Teraz mamy od jednej do czterech e-lekcji dziennie.</p></article>
		
      </section>
      </div>
      <div class="linia"></div>

				
				<!-- harmonogram -->
		<div class="tematy">		
			<section id="temat 2">
				
				<article><h3>Jak sobie z tym wszystkim poradzić? Bardzo dużo czasu zajmują e-lekcje i prace domowe, a gdzie czas na odpoczynek? Do tego będzie nam potrzebny harmonogram i plan działania.</h3></article>
				<article>
				
				<h3>Podejdźmy do tego logistycznie</h3>
				<p>Zidentyfikujmy potrzeby i obszary działania.
				Więc czego potrzebujemy? Na pewno czasu - dobrze zaplanowanego, ma się w nim zmieścić nauka i relaks.</p>
				<p>No dobra, potrzeby już mamy, teraz pytanie w jakich obszarach będziemy działać? 
				Na pewno będziemy odpowiedzialni za oddawanie prac w terminie i uczestnictwo w e-lekcjach, oraz za naukę do sprawdzianów i kartkówek</p>
				
				</article>
				<article>
				<p>Skoro wiemy już czego nam potrzeba i w jakich obszarach będziemy działać, zaplanujmy dzień.</p>
				<p>Zacznijmy od tego ile czasu damy sobie na spanie, zależy to od tego o której godzinie mamy pierwszą e-lekcję, każdego dnia jest inaczej, ja najwcześniej zaczynam o 9.00, więc dobrze by było wstać o 8.00 aby się przygotować. W inne dni pierwszą lekcję mam później, więc przed można zajrzeć do e-dziennika i odrobić prace domowe. Ostatnią lekcję mam około 14. Ciężko to wszystko w ten sposób rozpisać…. Lepiej zrobić to w tabeli.</p>
				<!--wstawić tabelę-->
				<p>Na zielono zaznaczyłem czas na naukę i odrabianie prac domowych, a na niebiesko e-lekcje</p>
				</article>
		
			</section>
		</div>		
        <!-- analiza i synteza -->
        
      <div class="linia"></div>

		<div class="tematy">		
			<section id="temat 3">
				<h3>Analiza i Synteza danych</h3>
				<article></article>
				<article></article>
			
			</section>
		</div>
  </main>
	</div>
	
	
	
	
	<!-- stopka -->
<footer id="footer" class="page-footer font-small blue bg-info">


  <div class="footer-copyright text-center py-3">
	<p> Michał Goszczyński &sdot; Logistyka mojego działania podczas zdalnego nauczania! &copy; 2020 &sdot; Wszelkie prawa zastrzeżone </p>
  </div>


</footer>
	
	<!-- skrypty javascript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>

</html>
body, html
{
	background-color: #cfffc9;
	margin:0;
	padding:0;
	height:100%;
	scroll-behavior: smooth;
	font-family: 'Quicksand', sans-serif;
	min-height: 100%;
	position: relative;
}

h1 
{
	color: yellow;
}

h3
{
	font-size: 25px;
}

.spis
{
	background-color: #99FFCC;
}

.carousel 
{
  margin-bottom: 4rem;
  
}

.carousel-caption 
{
  bottom: 3rem;
  z-index: 10;
}


.carousel-item 
{
  height: 32rem;
  
}
.carousel-item > img 
{
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}

.spis
{
	
}

.tematy
{
	font-size: 20px;
}

.tematy
{
	padding 3em;
	text-align: justify;
	margin-left: 2em;
	margin-right: 2em;
	margin-bottom: 60px;
	margin-top: 1em;
}


#container
{
	min-height:100%;
	position:relative;
}

.linia
{
	height: 30px;
	margin: 0 !important; 
	background-color: coral;
}


#footer 
{
	height: 57px;
    bottom: 0;
	/* position: fixed; */
	position: initial;
    left: calc(50% - 100em);
	right: calc(50% - 100em);
	bottom: 0;
	
}

 

1 odpowiedź

+1 głos
odpowiedź 16 maja 2020 przez zoya Bywalec (2,840 p.)

Bootstrap dodaje Ci dodatkowe paddingi, na stopce masz:

.pb-3, .py-3 {
    padding-bottom: 1rem !important;
}

 

komentarz 16 maja 2020 przez Goszczu31 Nowicjusz (160 p.)
Nie do końca działa, po pierwsze kiedy wpisałem ten kod luka jest jeszcze większa, po drugie, kiedy zamieniłem 1 rem na 0 to trochę się zmniejszyła ale nadal jest około 5-10px przestrzeni pod stopką
komentarz 16 maja 2020 przez Goszczu31 Nowicjusz (160 p.)
Dobra już naprawiłem, trzeba było zmienić z pb-3 i py-3 pb-0 i py-0

Podobne pytania

0 głosów
0 odpowiedzi 179 wizyt
pytanie zadane 28 lipca 2018 w HTML i CSS przez marek90552 Początkujący (430 p.)
0 głosów
2 odpowiedzi 86 wizyt
pytanie zadane 3 marca 2020 w HTML i CSS przez Pabllo26 Użytkownik (640 p.)
0 głosów
2 odpowiedzi 182 wizyt
pytanie zadane 13 września 2020 w HTML i CSS przez Robot 12 Początkujący (340 p.)

87,976 zapytań

136,557 odpowiedzi

304,510 komentarzy

58,337 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...