1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to make these divs always sticky

Discussion in 'HTML & Website Design' started by ketting00, Jan 14, 2022.

0
  1. #1
    Hi guys,

    I haven't do HTML, CSS for five years and my knowledge is waned off. So bear with me on my stupid questions.

    I've a basic page here: 
    
<!doctype html><html lang="en"><head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    <link rel="stylesheet" href="/xxxx/html/css/style.css" media="screen,projection,tv">

    <meta property="og:locale" content="en_US"/>
    <meta property="og:type" content="website"/>

    <title>XXXX</title>
</head><body>

<div id="wrapper">

    <div id="nav">
        <h1><a href="/"><em>XXXX</em></a></h1>
    </div>

    <div id="container">
        This is an example document.
    </div>

    <div id="footer">
        <a href="/xxxx/html/signup.html">Sign up</a> || <a href="/xxxx/html/signin.html">Sign in</a>
    </div>

</div> <!-- WRAPPER ENDED -->

</body></html>
    Code (markup):
    What I want is to make the main navigation div always on top, the footer div always on the bottom and the container div after the main nav which shrink and expand according to the content but not making it way into the bottom div.

    I want something like this: https://css-tricks.com/boxes-fill-height-dont-squish/

    but I want just three rows of block and each block is a unique one.

    Here's what I've done and the result is disgusting: 
    
#wrapper {
    width: 100%;
    min-height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background-color: green; /* just for testing */
}

#nav {
    flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    flex: 1 1 auto;
}

#container {
    flex: 2;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    flex: 1 1 auto;
}

#footer {

}
    Code (markup):
    Hope I make myself clear.

    Thank you,
     
    ketting00, Jan 14, 2022 IP
  2. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #2
    ketting00, Jan 15, 2022 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    1) you're not doing anything (yet) warranting a wrapping DIV.

    2) Even though they're kind-of pointless, you might as well use HTML 5's header/main/footer to avoid slopping classes all over the place.

    3) if you don't set 100% height on body and HTML, there's nothing for the wrapper to base height on.

    4) It's highly unlikely you would be emphasizing the content of a H1. That's redundant semantics.

    
<body>

	<header>
		<h1><a href="/">XXXX</a></h1>
	</header>

	<main>
		<h2>Main Content Here</h2>
		<p>
			This is an example document.
		</p>
	</main>

	<footer>
		<a href="#xxxx/html/signup.html">Sign up</a> || <a href="#xxxx/html/signin.html">Sign in</a>
	</footer>

</body>
    Code (markup):
    With this CSS:
    
html, body {
  height:100%;
  /* in production you'd likely have a reset in use */
  margin:0;
  padding:0;
}

body {
  display:flex;
  flex-direction:column;
}

body > * {
  flex:1 0 auto;
  padding:1rem;
}

body > *:not(main) {
  flex-grow:0;
  background:#5F5;
}
    Code (markup):
    Here's a pen:
    https://codepen.io/jason-knight/pen/jOGjWPo

    One thing you did that's silly is repeat yourself a lot.

    This:
    flex: 2;
    Code (markup):
    Is outright gibberish. It's binary true/false as 0/1

    This:
    flex:1 1 auto;
    Code (markup):
    Is the exact same thing as saying this:
    
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    Code (markup):
    In that order.
     
    deathshadow, Jan 20, 2022 IP
  4. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #4
    Wow! @deathshadow use HTML 5. You have been changed!

    May I ask another question?

    Since I like browsing web on a car screen lately (through app), do you have any tips on designing web UI for that? I mean to make it easy to navigate. I haven't code something like this for a long time and have no idea where today's trend heading to.
    My car screen is 10 inches. Combining with the car sound system it is the future of infosystem technology, I think.

    The reason I want to do this web thing again is there is no adblock there. You have to see all ads and my evil part of making money from web again coming in.

    Thank you,
     
    Last edited: Jan 21, 2022
    ketting00, Jan 21, 2022 IP