CODEWITHSUNDEEP
htmlcss
This lowly newb
This lowly newb

Reputation: 33

css height~min-height:100% not work

Here's the thing, the div not stretching fully to the rest of the page. using the height/min-height:100%; thing but not working

below is the aspx page code

<div class="wrapper">
        <div class="divHeader">
            <div class="divContainer">
            <div class="divContentLeft">
                <a href="Dashboard.aspx"><img src="../images/logo.png" /></a>
            </div>
            <div class="divContentLeft">
                <div class="divContentRow"></div>
                <div class="divContentRow"></div>

                <div class="divContentRow">
                    <div class="divContentLeft">
                        <a href="Dashboard.aspx"><span>Some Title Here</span></a>
                    </div>
                </div>
                <div class="divContentRow">
                    <div class="divContentLeft">
                        <a href="#"><img src="../images/menu_icon.png" height="20px" width="20px" onclick="" /></a>
                    </div>
                </div>
            </div>
            </div>
        </div>        
        <div class="divBody">
            <div class="divContentLeft" style="min-height:100%; height:100%;">
                <div class="menu-bar">
                    <ul class="menu-bar-ul" runat="server" id="divMenuBar">

                    </ul>
                </div>
            </div>
                <div class="divContentLeft">                    
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

                    </asp:ContentPlaceHolder>                    
                </div>

        </div>    
        <div class="divFooter">

        </div>
    </div>

And the css

body {  
    font-family: Helvetica, Arial, sans-serif;
}

.divHeader a {
    text-decoration:none;
    color:#000;
    font-weight:800;
}

.wrapper {
    padding:0;
    margin:0 auto;
    min-height:100%;
    height:100%;
    width:100%;
}

.divHeader, .divBody, .divFooter {
    padding:5px;
}

.divHeader {
    height:15%;
    clear:both;
    display:block;
    background-color:#CFCFC4;
    width:100%;
    border-bottom: 1px dotted gray;
}

.divBody {
    height:80%;
    width:100%;
    display:block;
    padding:0;
    margin:0 auto;
    clear:both;
    min-height:80%;
    height:auto;
}

.divFooter {
    height:5%;
    width:100%;
    display:block;
    margin:0 auto;
    padding:0;
    clear:both;
}

.divContentLeft {
    margin:0 auto;
    float:left;
    display:inline-block;
    position:relative;
}
.divContainer {
    clear:both;
    display:inline-block;
}

.divContentRow {
    width:100%;
    display:inline-block;
}

.divContentHeader {
    width:100%;
    height:20%;
    border-radius:25px;
    display:inline-block;
    margin:10px;
    padding:5px;
}

.divContentDetail {
    width:100%;
    height:80%;
    border-radius:25px;
    display:inline-block;
    margin:10px;
    padding:5px;
}


.ui-widget-header {
    background:#b39eb5;
}

.divContentTextbox {
    float:left;
    margin-left:15px;
    display:inline-block;
}

.divContentLabel {
    float:left;
    margin-left:15px;
}

* {
    padding: 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.divMenuBarBlock {
    float:left;
    width:100%;
    height:100%;
}

.menu-bar {
    float:left;
    min-height:100%;
    width:100%;
    height:100%;
    background: #CFCFC4;
}

.menu-bar a{
    display:block;
    padding: 10px 10px 10px 10px;
    text-decoration:none;
    border-bottom: 1px dotted gray;
    color: #000;
    letter-spacing: .002em;
    text-transform: uppercase;
    font-family:Helvetica, Arial, sans-serif;
    font-style:normal;
    font-size:medium;
}

.menu-bar li{
    list-style:none;
}

.menu-bar ul li ul li:hover {
    background:gray;
}

.menu-bar-ul ul {
    display:none;
}

.no-sub:hover {
    background:gray;
}

.sub-arrow {
    margin-left:15px;
}

.menu-bar-ul li.click ul {
    display:block;
}

.menu-bar .sub-arrow:after {
    content:'\203A';
    float:right;
    margin-right:10px;
    transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
}

.menu-bar li.click .sub-arrow:after {
    content: '\2039';
}

.menu-bar-ul ul a:before {
    content:'\203A';
    margin-right:10px;
}

So, the main problem is how i stretch the freaking div to the rest of the remaining page?

Because my navigation menu bar stretch as long as the only displayed item there also the content isn't stretched to the rest of the page

Regards

Upvotes: 2

Views: 1737

Answers (2)

rackit
rackit

Reputation: 1

.divBody { height: 80%; ... }

is not being applied. I changed it to

.divBody { height: 80% !important; ... and the wrapper div appeared to extend the entire height of the page. You could also figure out what is overriding the height attribute, if you're so inclined.

Chrome has a great DevTools. Just right-click a page in Chrome and hit inspect. As you mouse over items, their corresponding containers are highlighted. You can change a selectors css and see the change in real time.

Upvotes: -1

Michael Coker
Michael Coker

Reputation: 53709

You can use vh units. 100vh is 100% of the viewport height. This doesn't require setting the parents' heights and has good support - all browsers and ie >= 9.

body {  
    font-family: Helvetica, Arial, sans-serif;
}

.divHeader a {
    text-decoration:none;
    color:#000;
    font-weight:800;
}

.wrapper {
    padding:0;
    margin:0 auto;
    min-height:100vh;
    width:100%;
}

.divHeader, .divBody, .divFooter {
    padding:5px;
}

.divHeader {
    height:15%;
    clear:both;
    display:block;
    background-color:#CFCFC4;
    width:100%;
    border-bottom: 1px dotted gray;
}

.divBody {
    height:80%;
    width:100%;
    display:block;
    padding:0;
    margin:0 auto;
    clear:both;
    min-height:80%;
    height:auto;
}

.divFooter {
    height:5%;
    width:100%;
    display:block;
    margin:0 auto;
    padding:0;
    clear:both;
}

.divContentLeft {
    margin:0 auto;
    float:left;
    display:inline-block;
    position:relative;
}
.divContainer {
    clear:both;
    display:inline-block;
}

.divContentRow {
    width:100%;
    display:inline-block;
}

.divContentHeader {
    width:100%;
    height:20%;
    border-radius:25px;
    display:inline-block;
    margin:10px;
    padding:5px;
}

.divContentDetail {
    width:100%;
    height:80%;
    border-radius:25px;
    display:inline-block;
    margin:10px;
    padding:5px;
}


.ui-widget-header {
    background:#b39eb5;
}

.divContentTextbox {
    float:left;
    margin-left:15px;
    display:inline-block;
}

.divContentLabel {
    float:left;
    margin-left:15px;
}

* {
    padding: 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.divMenuBarBlock {
    float:left;
    width:100%;
    height:100%;
}

.menu-bar {
    float:left;
    min-height:100%;
    width:100%;
    height:100%;
    background: #CFCFC4;
}

.menu-bar a{
    display:block;
    padding: 10px 10px 10px 10px;
    text-decoration:none;
    border-bottom: 1px dotted gray;
    color: #000;
    letter-spacing: .002em;
    text-transform: uppercase;
    font-family:Helvetica, Arial, sans-serif;
    font-style:normal;
    font-size:medium;
}

.menu-bar li{
    list-style:none;
}

.menu-bar ul li ul li:hover {
    background:gray;
}

.menu-bar-ul ul {
    display:none;
}

.no-sub:hover {
    background:gray;
}

.sub-arrow {
    margin-left:15px;
}

.menu-bar-ul li.click ul {
    display:block;
}

.menu-bar .sub-arrow:after {
    content:'\203A';
    float:right;
    margin-right:10px;
    transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
}

.menu-bar li.click .sub-arrow:after {
    content: '\2039';
}

.menu-bar-ul ul a:before {
    content:'\203A';
    margin-right:10px;
}
<div class="wrapper">
  <div class="divHeader">
    <div class="divContainer">
      <div class="divContentLeft">
        <a href="Dashboard.aspx"><img src="../images/logo.png" /></a>
      </div>
      <div class="divContentLeft">
        <div class="divContentRow"></div>
        <div class="divContentRow"></div>

        <div class="divContentRow">
          <div class="divContentLeft">
            <a href="Dashboard.aspx"><span>Some Title Here</span></a>
          </div>
        </div>
        <div class="divContentRow">
          <div class="divContentLeft">
            <a href="#"><img src="../images/menu_icon.png" height="20px" width="20px" onclick="" /></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="divBody">
    <div class="divContentLeft" style="min-height:100%; height:100%;">
      <div class="menu-bar">
        <ul class="menu-bar-ul" runat="server" id="divMenuBar">

        </ul>
      </div>
    </div>
    <div class="divContentLeft">
      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

      </asp:ContentPlaceHolder>
    </div>

  </div>
  <div class="divFooter">

  </div>
</div>

Upvotes: 2

Related Questions