Empty div is invisible









up vote
0
down vote

favorite












I have a div that has a few css styles so that it fits on the page without having to scroll the page






chatForm.addEventListener('submit', function(e)
 e.preventDefault()
 //sends message
 
);

#chat 
 width:100%;
 height:100%;

#messagebox 
 border: 0; 
 padding: 10px; 
 width: 90%;
 height:10%;
 margin:0;
 float:left;

.submitButton 
 padding:10px;
 width: 10%;
 height:10%;
 background: #003;
 float:right;
 border:0;
 color:white;
 cursor: pointer;

.submitButton:hover 
 background:#033

#messages 
 width:100%;
 height:90%;
 margin:0;
 overflow:auto;

#messages p 
 padding: 5px 10px; 
 background: lightblue; 
 color:white;

#messages p:nth-child(odd) 
 background: white; 
 color:lightblue;

#messages p .deleteButton 
 background: white; 
 color:lightblue;

#messages p:nth-child(odd) .deleteButton
 background: lightblue; 
 color:white;

<div id="chat">
 <div id="messages">
 <p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p>
 </div>
 <form id="chatForm">
 <input id="messagebox" required/>
 <button class="submitButton">
 Send
 </button>
 </form>
</div>





Inside this div is nothing. However, it adds <p> whenever it receives a message from the server. Once it fills, it should have scroll bars that stop it from being too tall. However, this doesn't happen and it continues to fill. It's also invisible when empty. I have searched google and stackoverflow to no avail. Can someone help me understand why my css styles aren't working?



PS: The javascript is just there so it doesn't reload when you click the send button






html css







share|improve this question























  • Since you're using percentages, you have to make sure that the html/body tags also have a width and height of 100%.
    – Jacques
    Nov 9 at 19:03










  • ok whatever. Wait a minute, did you honestly just comment on my question so that you could reply to me?
    – Electrox Mortem
    Nov 10 at 4:48










  • @DaveNewton Also, it's listed in my developer story that I'm a mean person.
    – Electrox Mortem
    Nov 10 at 4:50










  • @DaveNewton For the intentions of the question that was asked, it seemed to be quite incorrect. Expecially since they were asking for a function called reduce, which according to the underline.js docs, was a function for arrays only. What's an FWIW???
    – Electrox Mortem
    Nov 10 at 5:16











  • Hm. Ok. Goodnight
    – Electrox Mortem
    Nov 10 at 5:27














up vote
0
down vote

favorite












I have a div that has a few css styles so that it fits on the page without having to scroll the page






chatForm.addEventListener('submit', function(e)
 e.preventDefault()
 //sends message
 
);

#chat 
 width:100%;
 height:100%;

#messagebox 
 border: 0; 
 padding: 10px; 
 width: 90%;
 height:10%;
 margin:0;
 float:left;

.submitButton 
 padding:10px;
 width: 10%;
 height:10%;
 background: #003;
 float:right;
 border:0;
 color:white;
 cursor: pointer;

.submitButton:hover 
 background:#033

#messages 
 width:100%;
 height:90%;
 margin:0;
 overflow:auto;

#messages p 
 padding: 5px 10px; 
 background: lightblue; 
 color:white;

#messages p:nth-child(odd) 
 background: white; 
 color:lightblue;

#messages p .deleteButton 
 background: white; 
 color:lightblue;

#messages p:nth-child(odd) .deleteButton
 background: lightblue; 
 color:white;

<div id="chat">
 <div id="messages">
 <p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p>
 </div>
 <form id="chatForm">
 <input id="messagebox" required/>
 <button class="submitButton">
 Send
 </button>
 </form>
</div>





Inside this div is nothing. However, it adds <p> whenever it receives a message from the server. Once it fills, it should have scroll bars that stop it from being too tall. However, this doesn't happen and it continues to fill. It's also invisible when empty. I have searched google and stackoverflow to no avail. Can someone help me understand why my css styles aren't working?



PS: The javascript is just there so it doesn't reload when you click the send button






html css







share|improve this question























  • Since you're using percentages, you have to make sure that the html/body tags also have a width and height of 100%.
    – Jacques
    Nov 9 at 19:03










  • ok whatever. Wait a minute, did you honestly just comment on my question so that you could reply to me?
    – Electrox Mortem
    Nov 10 at 4:48










  • @DaveNewton Also, it's listed in my developer story that I'm a mean person.
    – Electrox Mortem
    Nov 10 at 4:50










  • @DaveNewton For the intentions of the question that was asked, it seemed to be quite incorrect. Expecially since they were asking for a function called reduce, which according to the underline.js docs, was a function for arrays only. What's an FWIW???
    – Electrox Mortem
    Nov 10 at 5:16











  • Hm. Ok. Goodnight
    – Electrox Mortem
    Nov 10 at 5:27












up vote
0
down vote

favorite









up vote
0
down vote

favorite











I have a div that has a few css styles so that it fits on the page without having to scroll the page






chatForm.addEventListener('submit', function(e)
 e.preventDefault()
 //sends message
 
);

#chat 
 width:100%;
 height:100%;

#messagebox 
 border: 0; 
 padding: 10px; 
 width: 90%;
 height:10%;
 margin:0;
 float:left;

.submitButton 
 padding:10px;
 width: 10%;
 height:10%;
 background: #003;
 float:right;
 border:0;
 color:white;
 cursor: pointer;

.submitButton:hover 
 background:#033

#messages 
 width:100%;
 height:90%;
 margin:0;
 overflow:auto;

#messages p 
 padding: 5px 10px; 
 background: lightblue; 
 color:white;

#messages p:nth-child(odd) 
 background: white; 
 color:lightblue;

#messages p .deleteButton 
 background: white; 
 color:lightblue;

#messages p:nth-child(odd) .deleteButton
 background: lightblue; 
 color:white;

<div id="chat">
 <div id="messages">
 <p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p>
 </div>
 <form id="chatForm">
 <input id="messagebox" required/>
 <button class="submitButton">
 Send
 </button>
 </form>
</div>





Inside this div is nothing. However, it adds <p> whenever it receives a message from the server. Once it fills, it should have scroll bars that stop it from being too tall. However, this doesn't happen and it continues to fill. It's also invisible when empty. I have searched google and stackoverflow to no avail. Can someone help me understand why my css styles aren't working?



PS: The javascript is just there so it doesn't reload when you click the send button






html css







share|improve this question















I have a div that has a few css styles so that it fits on the page without having to scroll the page






chatForm.addEventListener('submit', function(e)
 e.preventDefault()
 //sends message
 
);

#chat 
 width:100%;
 height:100%;

#messagebox 
 border: 0; 
 padding: 10px; 
 width: 90%;
 height:10%;
 margin:0;
 float:left;

.submitButton 
 padding:10px;
 width: 10%;
 height:10%;
 background: #003;
 float:right;
 border:0;
 color:white;
 cursor: pointer;

.submitButton:hover 
 background:#033

#messages 
 width:100%;
 height:90%;
 margin:0;
 overflow:auto;

#messages p 
 padding: 5px 10px; 
 background: lightblue; 
 color:white;

#messages p:nth-child(odd) 
 background: white; 
 color:lightblue;

#messages p .deleteButton 
 background: white; 
 color:lightblue;

#messages p:nth-child(odd) .deleteButton
 background: lightblue; 
 color:white;

<div id="chat">
 <div id="messages">
 <p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p>
 </div>
 <form id="chatForm">
 <input id="messagebox" required/>
 <button class="submitButton">
 Send
 </button>
 </form>
</div>





Inside this div is nothing. However, it adds <p> whenever it receives a message from the server. Once it fills, it should have scroll bars that stop it from being too tall. However, this doesn't happen and it continues to fill. It's also invisible when empty. I have searched google and stackoverflow to no avail. Can someone help me understand why my css styles aren't working?



PS: The javascript is just there so it doesn't reload when you click the send button






chatForm.addEventListener('submit', function(e)
 e.preventDefault()
 //sends message
 
);

#chat 
 width:100%;
 height:100%;

#messagebox 
 border: 0; 
 padding: 10px; 
 width: 90%;
 height:10%;
 margin:0;
 float:left;

.submitButton 
 padding:10px;
 width: 10%;
 height:10%;
 background: #003;
 float:right;
 border:0;
 color:white;
 cursor: pointer;

.submitButton:hover 
 background:#033

#messages 
 width:100%;
 height:90%;
 margin:0;
 overflow:auto;

#messages p 
 padding: 5px 10px; 
 background: lightblue; 
 color:white;

#messages p:nth-child(odd) 
 background: white; 
 color:lightblue;

#messages p .deleteButton 
 background: white; 
 color:lightblue;

#messages p:nth-child(odd) .deleteButton
 background: lightblue; 
 color:white;

<div id="chat">
 <div id="messages">
 <p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p>
 </div>
 <form id="chatForm">
 <input id="messagebox" required/>
 <button class="submitButton">
 Send
 </button>
 </form>
</div>





chatForm.addEventListener('submit', function(e)
 e.preventDefault()
 //sends message
 
);

#chat 
 width:100%;
 height:100%;

#messagebox 
 border: 0; 
 padding: 10px; 
 width: 90%;
 height:10%;
 margin:0;
 float:left;

.submitButton 
 padding:10px;
 width: 10%;
 height:10%;
 background: #003;
 float:right;
 border:0;
 color:white;
 cursor: pointer;

.submitButton:hover 
 background:#033

#messages 
 width:100%;
 height:90%;
 margin:0;
 overflow:auto;

#messages p 
 padding: 5px 10px; 
 background: lightblue; 
 color:white;

#messages p:nth-child(odd) 
 background: white; 
 color:lightblue;

#messages p .deleteButton 
 background: white; 
 color:lightblue;

#messages p:nth-child(odd) .deleteButton
 background: lightblue; 
 color:white;

<div id="chat">
 <div id="messages">
 <p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p>
 </div>
 <form id="chatForm">
 <input id="messagebox" required/>
 <button class="submitButton">
 Send
 </button>
 </form>
</div>





html css




html css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 9 at 21:57









lgwilliams

296313




296313










asked Nov 9 at 19:00









Electrox Mortem

14713




14713











  • Since you're using percentages, you have to make sure that the html/body tags also have a width and height of 100%.
    – Jacques
    Nov 9 at 19:03










  • ok whatever. Wait a minute, did you honestly just comment on my question so that you could reply to me?
    – Electrox Mortem
    Nov 10 at 4:48










  • @DaveNewton Also, it's listed in my developer story that I'm a mean person.
    – Electrox Mortem
    Nov 10 at 4:50










  • @DaveNewton For the intentions of the question that was asked, it seemed to be quite incorrect. Expecially since they were asking for a function called reduce, which according to the underline.js docs, was a function for arrays only. What's an FWIW???
    – Electrox Mortem
    Nov 10 at 5:16











  • Hm. Ok. Goodnight
    – Electrox Mortem
    Nov 10 at 5:27
















  • Since you're using percentages, you have to make sure that the html/body tags also have a width and height of 100%.
    – Jacques
    Nov 9 at 19:03










  • ok whatever. Wait a minute, did you honestly just comment on my question so that you could reply to me?
    – Electrox Mortem
    Nov 10 at 4:48










  • @DaveNewton Also, it's listed in my developer story that I'm a mean person.
    – Electrox Mortem
    Nov 10 at 4:50










  • @DaveNewton For the intentions of the question that was asked, it seemed to be quite incorrect. Expecially since they were asking for a function called reduce, which according to the underline.js docs, was a function for arrays only. What's an FWIW???
    – Electrox Mortem
    Nov 10 at 5:16











  • Hm. Ok. Goodnight
    – Electrox Mortem
    Nov 10 at 5:27















Since you're using percentages, you have to make sure that the html/body tags also have a width and height of 100%.
– Jacques
Nov 9 at 19:03




Since you're using percentages, you have to make sure that the html/body tags also have a width and height of 100%.
– Jacques
Nov 9 at 19:03












ok whatever. Wait a minute, did you honestly just comment on my question so that you could reply to me?
– Electrox Mortem
Nov 10 at 4:48




ok whatever. Wait a minute, did you honestly just comment on my question so that you could reply to me?
– Electrox Mortem
Nov 10 at 4:48












@DaveNewton Also, it's listed in my developer story that I'm a mean person.
– Electrox Mortem
Nov 10 at 4:50




@DaveNewton Also, it's listed in my developer story that I'm a mean person.
– Electrox Mortem
Nov 10 at 4:50












@DaveNewton For the intentions of the question that was asked, it seemed to be quite incorrect. Expecially since they were asking for a function called reduce, which according to the underline.js docs, was a function for arrays only. What's an FWIW???
– Electrox Mortem
Nov 10 at 5:16





@DaveNewton For the intentions of the question that was asked, it seemed to be quite incorrect. Expecially since they were asking for a function called reduce, which according to the underline.js docs, was a function for arrays only. What's an FWIW???
– Electrox Mortem
Nov 10 at 5:16













Hm. Ok. Goodnight
– Electrox Mortem
Nov 10 at 5:27




Hm. Ok. Goodnight
– Electrox Mortem
Nov 10 at 5:27












2 Answers
2






active

oldest

votes

















up vote
2
down vote



accepted










Probably you didn't define this:



html, body 
 height: 100%;



And the same for any other element between body and #chat- the 100% height need a reference.



Without that, that DIV is only as high as it's content, so if there is no content, it will remain invisible....






share|improve this answer






















  • Whymst does yu keep editting my stuff and not telling me what it is you did?!?!
    – Electrox Mortem
    Nov 9 at 19:18










  • @JermahlWhite If you click the "Edited X mins ago" above the editor's name, it shows you a diff of the of the changes.
    – Tyler Roper
    Nov 9 at 19:21










  • Oh. oof. Thanks for telling me this
    – Electrox Mortem
    Nov 9 at 19:23

















up vote
0
down vote













Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.



However, the content of body will probably need to change dynamically. Setting height to 100% will accomplish your goal.






chatForm.addEventListener('submit', function(e)
 e.preventDefault()
 //sends message
 
);

html, body 
 height:100%;


#chat 
 width:100%;
 height:100%;

#messagebox 
 border: 0; 
 padding: 10px; 
 width: 90%;
 height:10%;
 margin:0;
 float:left;

.submitButton 
 padding:10px;
 width: 10%;
 height:10%;
 background: #003;
 float:right;
 border:0;
 color:white;
 cursor: pointer;

.submitButton:hover 
 background:#033

#messages 
 width:100%;
 height:90%;
 margin:0;
 overflow:auto;

#messages p 
 padding: 5px 10px; 
 background: lightblue; 
 color:white;

#messages p:nth-child(odd) 
 background: white; 
 color:lightblue;

#messages p .deleteButton 
 background: white; 
 color:lightblue;

#messages p:nth-child(odd) .deleteButton
 background: lightblue; 
 color:white;

<div id="chat">
 <div id="messages">
 <p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p>
 </div>
 <form id="chatForm">
 <input id="messagebox" required/>
 <button class="submitButton">
 Send
 </button>
 </form>
</div>








share|improve this answer




















    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













     

    draft saved


    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53231819%2fempty-div-is-invisible%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    2
    down vote



    accepted










    Probably you didn't define this:



    html, body 
     height: 100%;



    And the same for any other element between body and #chat- the 100% height need a reference.



    Without that, that DIV is only as high as it's content, so if there is no content, it will remain invisible....






    share|improve this answer






















    • Whymst does yu keep editting my stuff and not telling me what it is you did?!?!
      – Electrox Mortem
      Nov 9 at 19:18










    • @JermahlWhite If you click the "Edited X mins ago" above the editor's name, it shows you a diff of the of the changes.
      – Tyler Roper
      Nov 9 at 19:21










    • Oh. oof. Thanks for telling me this
      – Electrox Mortem
      Nov 9 at 19:23














    up vote
    2
    down vote



    accepted










    Probably you didn't define this:



    html, body 
     height: 100%;



    And the same for any other element between body and #chat- the 100% height need a reference.



    Without that, that DIV is only as high as it's content, so if there is no content, it will remain invisible....






    share|improve this answer






















    • Whymst does yu keep editting my stuff and not telling me what it is you did?!?!
      – Electrox Mortem
      Nov 9 at 19:18










    • @JermahlWhite If you click the "Edited X mins ago" above the editor's name, it shows you a diff of the of the changes.
      – Tyler Roper
      Nov 9 at 19:21










    • Oh. oof. Thanks for telling me this
      – Electrox Mortem
      Nov 9 at 19:23












    up vote
    2
    down vote



    accepted







    up vote
    2
    down vote



    accepted






    Probably you didn't define this:



    html, body 
     height: 100%;



    And the same for any other element between body and #chat- the 100% height need a reference.



    Without that, that DIV is only as high as it's content, so if there is no content, it will remain invisible....






    share|improve this answer














    Probably you didn't define this:



    html, body 
     height: 100%;



    And the same for any other element between body and #chat- the 100% height need a reference.



    Without that, that DIV is only as high as it's content, so if there is no content, it will remain invisible....







    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Nov 9 at 19:16

























    answered Nov 9 at 19:03









    Johannes

    36.1k92764




    36.1k92764











    • Whymst does yu keep editting my stuff and not telling me what it is you did?!?!
      – Electrox Mortem
      Nov 9 at 19:18










    • @JermahlWhite If you click the "Edited X mins ago" above the editor's name, it shows you a diff of the of the changes.
      – Tyler Roper
      Nov 9 at 19:21










    • Oh. oof. Thanks for telling me this
      – Electrox Mortem
      Nov 9 at 19:23
















    • Whymst does yu keep editting my stuff and not telling me what it is you did?!?!
      – Electrox Mortem
      Nov 9 at 19:18










    • @JermahlWhite If you click the "Edited X mins ago" above the editor's name, it shows you a diff of the of the changes.
      – Tyler Roper
      Nov 9 at 19:21










    • Oh. oof. Thanks for telling me this
      – Electrox Mortem
      Nov 9 at 19:23















    Whymst does yu keep editting my stuff and not telling me what it is you did?!?!
    – Electrox Mortem
    Nov 9 at 19:18




    Whymst does yu keep editting my stuff and not telling me what it is you did?!?!
    – Electrox Mortem
    Nov 9 at 19:18












    @JermahlWhite If you click the "Edited X mins ago" above the editor's name, it shows you a diff of the of the changes.
    – Tyler Roper
    Nov 9 at 19:21




    @JermahlWhite If you click the "Edited X mins ago" above the editor's name, it shows you a diff of the of the changes.
    – Tyler Roper
    Nov 9 at 19:21












    Oh. oof. Thanks for telling me this
    – Electrox Mortem
    Nov 9 at 19:23




    Oh. oof. Thanks for telling me this
    – Electrox Mortem
    Nov 9 at 19:23












    up vote
    0
    down vote













    Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.



    However, the content of body will probably need to change dynamically. Setting height to 100% will accomplish your goal.






    chatForm.addEventListener('submit', function(e)
     e.preventDefault()
     //sends message
     
    );

    html, body 
     height:100%;


    #chat 
     width:100%;
     height:100%;

    #messagebox 
     border: 0; 
     padding: 10px; 
     width: 90%;
     height:10%;
     margin:0;
     float:left;

    .submitButton 
     padding:10px;
     width: 10%;
     height:10%;
     background: #003;
     float:right;
     border:0;
     color:white;
     cursor: pointer;

    .submitButton:hover 
     background:#033

    #messages 
     width:100%;
     height:90%;
     margin:0;
     overflow:auto;

    #messages p 
     padding: 5px 10px; 
     background: lightblue; 
     color:white;

    #messages p:nth-child(odd) 
     background: white; 
     color:lightblue;

    #messages p .deleteButton 
     background: white; 
     color:lightblue;

    #messages p:nth-child(odd) .deleteButton
     background: lightblue; 
     color:white;

    <div id="chat">
     <div id="messages">
     <p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p>
     </div>
     <form id="chatForm">
     <input id="messagebox" required/>
     <button class="submitButton">
     Send
     </button>
     </form>
    </div>








    share|improve this answer
























      up vote
      0
      down vote













      Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.



      However, the content of body will probably need to change dynamically. Setting height to 100% will accomplish your goal.






      chatForm.addEventListener('submit', function(e)
       e.preventDefault()
       //sends message
       
      );

      html, body 
       height:100%;


      #chat 
       width:100%;
       height:100%;

      #messagebox 
       border: 0; 
       padding: 10px; 
       width: 90%;
       height:10%;
       margin:0;
       float:left;

      .submitButton 
       padding:10px;
       width: 10%;
       height:10%;
       background: #003;
       float:right;
       border:0;
       color:white;
       cursor: pointer;

      .submitButton:hover 
       background:#033

      #messages 
       width:100%;
       height:90%;
       margin:0;
       overflow:auto;

      #messages p 
       padding: 5px 10px; 
       background: lightblue; 
       color:white;

      #messages p:nth-child(odd) 
       background: white; 
       color:lightblue;

      #messages p .deleteButton 
       background: white; 
       color:lightblue;

      #messages p:nth-child(odd) .deleteButton
       background: lightblue; 
       color:white;

      <div id="chat">
       <div id="messages">
       <p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p>
       </div>
       <form id="chatForm">
       <input id="messagebox" required/>
       <button class="submitButton">
       Send
       </button>
       </form>
      </div>








      share|improve this answer






















        up vote
        0
        down vote










        up vote
        0
        down vote









        Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.



        However, the content of body will probably need to change dynamically. Setting height to 100% will accomplish your goal.






        chatForm.addEventListener('submit', function(e)
         e.preventDefault()
         //sends message
         
        );

        html, body 
         height:100%;


        #chat 
         width:100%;
         height:100%;

        #messagebox 
         border: 0; 
         padding: 10px; 
         width: 90%;
         height:10%;
         margin:0;
         float:left;

        .submitButton 
         padding:10px;
         width: 10%;
         height:10%;
         background: #003;
         float:right;
         border:0;
         color:white;
         cursor: pointer;

        .submitButton:hover 
         background:#033

        #messages 
         width:100%;
         height:90%;
         margin:0;
         overflow:auto;

        #messages p 
         padding: 5px 10px; 
         background: lightblue; 
         color:white;

        #messages p:nth-child(odd) 
         background: white; 
         color:lightblue;

        #messages p .deleteButton 
         background: white; 
         color:lightblue;

        #messages p:nth-child(odd) .deleteButton
         background: lightblue; 
         color:white;

        <div id="chat">
         <div id="messages">
         <p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p>
         </div>
         <form id="chatForm">
         <input id="messagebox" required/>
         <button class="submitButton">
         Send
         </button>
         </form>
        </div>








        share|improve this answer












        Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.



        However, the content of body will probably need to change dynamically. Setting height to 100% will accomplish your goal.






        chatForm.addEventListener('submit', function(e)
         e.preventDefault()
         //sends message
         
        );

        html, body 
         height:100%;


        #chat 
         width:100%;
         height:100%;

        #messagebox 
         border: 0; 
         padding: 10px; 
         width: 90%;
         height:10%;
         margin:0;
         float:left;

        .submitButton 
         padding:10px;
         width: 10%;
         height:10%;
         background: #003;
         float:right;
         border:0;
         color:white;
         cursor: pointer;

        .submitButton:hover 
         background:#033

        #messages 
         width:100%;
         height:90%;
         margin:0;
         overflow:auto;

        #messages p 
         padding: 5px 10px; 
         background: lightblue; 
         color:white;

        #messages p:nth-child(odd) 
         background: white; 
         color:lightblue;

        #messages p .deleteButton 
         background: white; 
         color:lightblue;

        #messages p:nth-child(odd) .deleteButton
         background: lightblue; 
         color:white;

        <div id="chat">
         <div id="messages">
         <p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p>
         </div>
         <form id="chatForm">
         <input id="messagebox" required/>
         <button class="submitButton">
         Send
         </button>
         </form>
        </div>








        chatForm.addEventListener('submit', function(e)
         e.preventDefault()
         //sends message
         
        );

        html, body 
         height:100%;


        #chat 
         width:100%;
         height:100%;

        #messagebox 
         border: 0; 
         padding: 10px; 
         width: 90%;
         height:10%;
         margin:0;
         float:left;

        .submitButton 
         padding:10px;
         width: 10%;
         height:10%;
         background: #003;
         float:right;
         border:0;
         color:white;
         cursor: pointer;

        .submitButton:hover 
         background:#033

        #messages 
         width:100%;
         height:90%;
         margin:0;
         overflow:auto;

        #messages p 
         padding: 5px 10px; 
         background: lightblue; 
         color:white;

        #messages p:nth-child(odd) 
         background: white; 
         color:lightblue;

        #messages p .deleteButton 
         background: white; 
         color:lightblue;

        #messages p:nth-child(odd) .deleteButton
         background: lightblue; 
         color:white;

        <div id="chat">
         <div id="messages">
         <p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p>
         </div>
         <form id="chatForm">
         <input id="messagebox" required/>
         <button class="submitButton">
         Send
         </button>
         </form>
        </div>





        chatForm.addEventListener('submit', function(e)
         e.preventDefault()
         //sends message
         
        );

        html, body 
         height:100%;


        #chat 
         width:100%;
         height:100%;

        #messagebox 
         border: 0; 
         padding: 10px; 
         width: 90%;
         height:10%;
         margin:0;
         float:left;

        .submitButton 
         padding:10px;
         width: 10%;
         height:10%;
         background: #003;
         float:right;
         border:0;
         color:white;
         cursor: pointer;

        .submitButton:hover 
         background:#033

        #messages 
         width:100%;
         height:90%;
         margin:0;
         overflow:auto;

        #messages p 
         padding: 5px 10px; 
         background: lightblue; 
         color:white;

        #messages p:nth-child(odd) 
         background: white; 
         color:lightblue;

        #messages p .deleteButton 
         background: white; 
         color:lightblue;

        #messages p:nth-child(odd) .deleteButton
         background: lightblue; 
         color:white;

        <div id="chat">
         <div id="messages">
         <p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p>
         </div>
         <form id="chatForm">
         <input id="messagebox" required/>
         <button class="submitButton">
         Send
         </button>
         </form>
        </div>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 9 at 19:16









        Michal

        2,0491135




        2,0491135



























             

            draft saved


            draft discarded















































             


            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53231819%2fempty-div-is-invisible%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -

            Popular posts from this blog

            Darth Vader #20

            Image
            Wiki Characters Creators Teams Volumes Issues Publishers Locations Concepts Things Story Arcs Movies Series Episodes New Comics Forums Gen. Discussion Bug Reporting Delete/Combine Pages Artist Show-Off Off-Topic Contests Battles Fan-Fic RPG Comic Book Preview API Developers Editing & Tools Podcast Quests Community Top Users Activity Feed User Lists Community Promos Archives News Reviews Videos Podcasts Previews Login / Sign Up All Wiki     Arcs     Characters     Companies     Concepts     Issues     Locations     Movies     People     Teams     Things     Volumes     Series     Episodes Editorial     Videos     Articles     Reviews     Features Community     Users Wiki Characters Creators Teams Volumes Issues Publishers Locations Concepts Things Story Arcs Movies Series Episodes New Comics Forums Gen. Discussion Bug Reporting Delete/Combine Pages Artist Show-Off Off-Topic Contests Battles Fan-Fic RPG Comic Book Preview API Developers Editing & Tools Podcast Quests Com
            Read more

            How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

            Image
            0 I have a "Ask for demo" form which has two options, 1. Contact me now and 2. Schedule a demo. If user selects option 1 then current date and time should by displayed on form and if he selects option 2 then A calendar is shown for taking user input. My problem is getting current date and time by default on form. Please help. TIA contact-form-7 share | improve this question asked Nov 12 '18 at 9:01 abhi25 abhi25 14 5 add a comment  |  0 I have a "Ask for demo" form which has two options, 1. Contact me now and 2. Schedule a demo. If user selects option 1 then current date and time should by displayed on form and if he selects option 2 then A calendar is shown for taking user input. My problem is getting current date and time by default on form. Please help. TIA contact-form-7 share | improve this question asked Nov 12 '18 at 9:01 abhi25 abhi25 14 5 add a commen
            Read more

            Ondo

            Image
            Der Titel dieses Artikels ist mehrdeutig. Zu weiteren Bedeutungen siehe Ondo (Begriffsklärung). Ondo Basisdaten Hauptstadt: Akure gegründet: 3. Februar 1976 Gouverneur: Rotimi Akeredolu ISO 3166-2: NG-ON Fläche Fläche: 15.500 km² Rang in Nigeria: 25 Bevölkerung Einwohner: 4.671.700 (2016) Bevölkerungsdichte: 320 Einw./km² (2016) Rang in Nigeria: 18 Lage von Ondo in Nigeria Ondo ist ein Bundesstaat des westafrikanischen Landes Nigeria mit der Hauptstadt Akure, die mit 420.623 Einwohnern (2005) auch die größte Stadt des Bundesstaates ist. Inhaltsverzeichnis 1 Geografie 2 Geschichte 2.1 Liste der Gouverneure und Administratoren 3 Verwaltung 4 Wirtschaft Geografie | Der Bundesstaat liegt im Südwesten des Landes und grenzt im Norden an den Bundesstaat Ekiti, im Nordwesten an den Bundesstaat Osun, im Nordosten an den Bundesstaat Kogi, im Süden an den Atlantik, im Südosten an den Bundesstaat Delta, im Westen an den Bundesstaat Ogun und im Osten an den Bundesstaat Edo. Geschichte | Der
            Read more