CODEWITHSUNDEEP
htmlcss
Thor My
Thor My

Reputation: 299

How to Limit the Div Exactly into the Screen Size

this is the html code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tela Cheia no CSS</title>
<link href="Styles 02B.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="cabecalho"></div>
<div id="conteudo">
<p>Texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
</div>
<div id="rodape"></div>
</body>
</html>

and this is the css code:

body {
    margin: 90px 0px 0px 0px;
    padding: 0;
    background-color: #FFF501;
    border: thick solid #FF0B0F;
}

#cabecalho {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    background-color: #2A00FF;
    border: thick solid #49FF00;
    height: 90px;
    z-index: 2;
}

#conteudo {
    position: fixed;
    top: auto;
    left: 0;
    width: 100%;
    padding: 0;
    background-color: #F108D3;
    border: thick solid #FFBE00;
    height: 100%;
    z-index: 2;
    overflow-y: auto;
    overflow-x: auto;
}

#rodape {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0;
    background-color: #2A00FF;
    border: thick solid #49FF00;
    height: 45px;
    z-index: 2;
}

I want exactly this but with a small difference: the hole header (and footer and content) inside the screen size, including the border. note that the border on the right is out of the screen and I need this inside the screen. just that.

if any of you know how to get that, please, help me. I'd appreciate your help.

thanks in advance.

Upvotes: 1

Views: 759

Answers (2)

don magug
don magug

Reputation: 322

I still get confused of your question. Is this what you mean?

Use iframe to handle it.

I use my blog to try this:

<iframe align="top" allowtransparency="yes" frameborder="1" scrolling="auto" height="600" width="600" src="http://www.appacyber.net/test.php"></iframe>

check this link

Upvotes: 0

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

Just add *{box-sizing: border-box}

        *{box-sizing: border-box}
        body {
            margin: 90px 0px 0px 0px;
            padding: 0;
            background-color: #FFF501;
            border: thick solid #FF0B0F;
        }

        #cabecalho {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 0;
            background-color: #2A00FF;
            border: thick solid #49FF00;
            height: 90px;
            z-index: 2;
        }

        #conteudo {
            position: fixed;
            top: 90px; /*add this it is the height of #cabecalho*/
            left: 0;
            bottom: 50px; /*add this it is the height of #rodape*/
            width: 100%;
            padding: 0;
            background-color: #F108D3;
            border: thick solid #FFBE00;
            z-index: 2;
            overflow-y: auto;
            overflow-x: auto;
        }

        #rodape {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 0;
            background-color: #2A00FF;
            border: thick solid #49FF00;
            height: 45px;
            z-index: 2;
        }
     <!doctype html>
        <html>
        <head>
        <meta charset="utf-8">
        <title>Tela Cheia no CSS</title>
        <link href="Styles 02B.css" rel="stylesheet" type="text/css">
        </head>

        <body>
        <div id="cabecalho"></div>
        <div id="conteudo">
        <p>Texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        <p>Texto de exemplo...</p>
        </div>
        <div id="rodape"></div>
        </body>
        </html>

Upvotes: 1

Related Questions