Jump to content
Fórum Script Brasil
  • 0

Div vazando no final da página


Igor Matuchewski

Question

Boa noite a todos! Estou relembrando alguns conceitos de CSS e JS e fazendo uma to do list, porém a minha div em que eu insiro os conteudos para aparecem na tela vão ultrapassando o limite do footer, não consigo travar ele para que fique a x px ou rem do final da página.

Coloquei o footer em vermelho apenas para explicitar o que está acontecendo (não sou nenhum maniaco com cores kkk)

 

Os códigos: 

html: 

<!DOCTYPE html>
 
<html lang="pt-BR">
 
<head>
 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do List</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" defer></script>
</head>
 
<body>
   
    <div id="container" data-theme="dark">
 
        <header class="header">
            <h1>To Do List</h1>
            <button id="switchTheme">turn dark</button>
        </header>
 
        <div class="secndContainer">
            <div class="mainContent">
                <label for="nomeTarefa">Task Name:</label>
                <input type="text" name="nomeTarefa">
 
                <label for="descricao">Description:</label>
                <textarea name="descricao" id="descricaoTarefa" cols="20" rows="6"></textarea>
 
                <label for="data">Date limit:</label>
                <input type="date" name="data">
 
                <button type="button" id="register">Place Task</button>
            </div>
 
            <div class="toDo">
 
                <h2>Unfinished or Unstarted tasks</h2>
 
                <ul id="tasks">
                    <li>
                        <h4>Limpar a Casa</h4>
                        <p class="pTask">Passar o rodo e lavar as roupas</p>
                        <p class="pTask">05/12/2023</p>
                        <button class="finished">Finished</button>
                    </li>
                    <hr>
                    <li>
                        <h4>Limpar a Casa</h4>
                        <p class="pTask">Passar o rodo e lavar as roupas</p>
                        <p class="pTask">05/12/2023</p>
                        <button class="finished">Finished</button>
                    </li>
                    <li>
                        <h4>Limpar a Casa</h4>
                        <p class="pTask">Passar o rodo e lavar as roupas</p>
                        <p class="pTask">05/12/2023</p>
                        <button class="finished">Finished</button>
                    </li>
                    <li>
                        <h4>Limpar a Casa</h4>
                        <p class="pTask">Passar o rodo e lavar as roupas</p>
                        <p class="pTask">05/12/2023</p>
                        <button class="finished">Finished</button>
                    </li>
                    <li>
                        <h4>Limpar a Casa</h4>
                        <p class="pTask">Passar o rodo e lavar as roupas</p>
                        <p class="pTask">05/12/2023</p>
                        <button class="finished">Finished</button>
                    </li>
                </ul>
 
            </div>
        </div>
 
        <footer id="footer">FooterFooterFooterFooterFooterFooterFooterFooter.</footer>
 
    </div>
 
</body>
</html>

css: 

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: monospace, Arial, sans-serif;
    transition: 1.5s;
    color: var(--txtColor);
}
 
:root{
    --bg-Color: white;
    --bg-Header-Color: #C3A27F;
    --btn-Bg-Color: #333;
    --btn-Border-Color: #04ca3f;
    --txtColor: black;
    --bg-Input-Txt: #d3bba2;
}
 
body{
    background-color: var(--bg-Color)
}
 
#container{
    display: flex;
    flex-flow: row wrap;
    gap: 0.5rem;
}
 
input, textarea{
    border-radius: 4px;
    border-width: 0.15rem;
    border-color: black;
    background-color: var(--bg-Input-Txt);
}
 
input{
    height: 2rem;
}
 
.header{
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--bg-Header-Color);
    width: 100%;
    height: 4rem;
    margin-bottom: 3rem;
}
 
#switchTheme{
    color: white;
    padding: 6.5px;
    background-color: var(--btn-Bg-Color);
    border-radius: 5px;
    border-color: transparent;
    cursor: pointer;
    font-size: 13px;
}
 
#switchTheme:hover{
    border-radius: 5px;
    border-right: 0.2rem solid white;
    border-bottom: 0.2rem solid white;
    background-color: black;
    color: white;
}
 
.secndContainer{
    display: flex;
    flex-flow: column wrap;
    margin: auto;
    gap: 5rem;
}
 
#register{
    background-color: var(--bg-Input-Txt);
    height: 2.5rem;
    border-radius: 6px;
    padding: 5px;
    cursor: pointer;
}
 
#register:hover{
    border-radius: 5px;
    border-right: 0.2rem solid black;
    border-bottom: 0.2rem solid black;
    background-color: var(--bg-Header-Color);
    color: black;
    font-weight: bold;
}
 
.mainContent{
    display: flex;
    background-color: var(--bg-Header-Color);
    max-width: 100% - (300px);
    height: 7rem;
    margin: auto;
    padding: 10px;
    gap: 25px;
    border-radius: 7px;
    justify-content: space-evenly;
    align-items: center;
    flex-flow: row wrap;
}
 
.toDo{
    display: flex;
    gap: 2rem;
    flex-direction: column;
    min-width: 70%;
    max-width: 100% - (300px);
    text-align: center;
    margin: auto;
    padding: 2rem;
    border-radius: 7px;
    background-color: var(--bg-Header-Color);
    max-height: 100% - (300px);
}
 
li{
    margin-bottom: 20px;
    margin-top: 20px;
}
 
.finished{
    margin-top: 15px;
    background-color: var(--bg-Input-Txt);
    height: 2.5rem;
    border-radius: 6px;
    padding: 5px;
    cursor: pointer;
}
 
.finished:hover{
    border-radius: 5px;
    border-right: 0.2rem solid black;
    border-bottom: 0.2rem solid black;
    background-color: green;
    color: black;
    font-weight: bold;
}
 
.pTask{
    font-size: 12px;
}
 
#footer{
    display:flex;
    width: 100%;
    height: 4em;
    background-color: red;
    bottom: 0;
    position: fixed;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
}

Captura de tela 2023-09-20 191254.png

Edited by Igor Matuchewski
Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.8k
×
×
  • Create New...