JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Abstände mit border</title>
    </head>
    
    <body>
        
        <header></header>
        
        <section>
            Content<br />Content<br />Content<br />Content<br />Content<br />
            Content<br />Content<br />Content<br />Content<br />Content<br />
            Content<br />Content<br />Content<br />Content<br />Content<br />
            Content<br />Content<br />Content<br />Content<br />Content<br />
            Content<br />Content<br />Content<br />Content<br />Content<br />
            Content<br />Content<br />Content<br />Content<br />Content<br />
            Content<br />Content<br />Content<br />Content<br />Content<br />
            Content<br />Content<br />Content<br />Content<br />Content<br />
            Content<br />Content<br />Content<br />Content<br />Content<br />
            Content<br />Content<br />Content<br />Content<br />Content<br />
            Content<br />Content<br />Content<br />Content<br />Content<br />
            Content<br />Content<br />Content<br />Content<br />Content<br />
            Content<br />Content<br />Content<br />Content<br />Content<br />
            Content<br />Content<br />Content<br />Content<br />Content<br />
        </section>
        
        <footer></footer>
        
    </body>
</html>

CSS

* {
    margin: 0 ;
    padding: 0 ;
    border: 0 none ;
}

html, body {
    width: 100% ;
    height: 100% ;
}

body > header,
body > footer {
    position: fixed ;
    right: 0 ;
    left: 0 ;
    height: 70px ;
    background-color: lightblue ;
}

body > header {
    top: 0 ;
    border-bottom: 20px solid lightgreen ; /* Header Rand unten*/
}

body > section {
    padding-top: 70px ;
    padding-bottom: 70px ;
}

body > footer {
    bottom: 0 ;
    border-top: 20px solid lightgreen ; /* Footer Rand oben */
}