height issue with containers div

coder
coder used Ask the Experts™
on
Hi Experts,

I have a parent div with class container with min-height 100% and having a border.    I have child div's But on mobile view parent container border is not growing with the size of child elements.  Child div's comes out of parent div.    Please see the screen and code below for more information.  You can see the third card is outside the main container.  Please help me in resolving this issue

  <body> 
    <div class="container">
    <div class="jumbotron">
        <img  src="images\banner.png"/>
    </div>
	<div class="row" style="Text-Align:center">
	
	<div class="card border-dark" style="width: 15rem;">
	   <p><h5><strong>Resources available to access at Northern Territory Library Only</strong></h5></p>
	   <ul>
	         <li><a href="https://ntln.idm.oclc.org/login?=url=https://ancestrylibrary.proquest.com"><strong>Ancestry Library Edition</strong></a></li>
			 <li><a href="https://ntln.idm.oclc.org/login?url=https://www.findmypast.com.au"><strong>find my past Australiasia</strong></a></li>
			 <li><a href="https://ntln.idm.oclc.org/login?url=https://www.saiglobal.com/online/autologin.asp?br=true&userid=6500121359"><strong>SAI Global onsite</strong></a></li>
			 <li><a href="https://ntln.idm.oclc.org/login?url=https://www.pressreader.com"><strong>Press reader</strong></a></li>
	   </ul>	   
	</div>
	<div class="card border-dark" style="width: 15rem;">
	   <p><h5><strong>Login to these resources anywhere using your public library membership</strong></h5></p>
	   <ul>
	         <li><a href="https://ntln.idm.oclc.org/login?url=http://search.ebscohost.com/login.aspx?authtype=ip,uid&profile=ehost&defaultdb=f5h&custid=ntlis"><strong>Ebsco host</strong></a></li>
			 <li><a href="https://ntln.idm.oclc.org/login?url=https://search.informit.com.au"><strong>Inform It</strong></a></li>
			 <li><a href="https://ntln.idm.oclc.org/login?url=https://www.saiglobal.com/online/autologin.asp?br=true&userid=7578676713"><strong>SAI Global offsite</strong></a></li>
	   </ul>	   
	</div>
	<div class="card border-dark" style="width: 15rem;">
	   <p><h5><strong>Log into these books emagazines & newspapers</strong></h5></p>
	   <ul>
	         <li><a href="https://ntln.idm.oclc.org/sso/bol"><strong>Bolinda</strong></a></li>
			 <li><a href="https://www.rbdigital.com/northernterritory/zinio"><strong>RB Digital Magazines</strong></a></li>
			 <li><a href="https://ntln.idm.oclc.org/login?url=http://www.pressreader.com"><strong>Press reader</strong></a></li>
			 <li><a href="https://ntln.idm.oclc.org/login?url=http://infotrac.galegroup.com/itweb/ntlis?db=TTDA"><strong>The Times Digital Articles</strong></a></li>
	   </ul>	   
	</div>	
	
	
    <div class="row" id="search-footer">
        <div id="searchlogo">
              <img src="images/searchlogo.png"/> 
        </div>
		<div id="group">
			<label>Search the Northern Territory Library catalogue</label>
			<div class="row" id="search-group">
              <input type="text" name="search" id="search">
			  <button class="btn btn-primary">Search</button>
			</div> 
		</div>		
	</div>
	</div>
    </div>	

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>

Open in new window


css code is as follows

.jumbotron{
    text-align:center;
   	background-color:#FFFFFF;
}

.jumbotron img {
	max-width:100%;
	height:auto;
}

html {
	height:100%;
	min-height:100%;
}

html  body{
	height:100%;
	min-height:100%;
}

html body .container{
	height:100%;	
	min-height:100%;
}

.container {
  width: 60%;
  //height:95%;
  height:98%;
  margin: 0 center;
  box-sizing: content-box;
  border-style: solid;
  margin-left:auto;
  margin-right:auto;
  margin-top:25px;
  margin-bottom:25px; 
}

li {
list-style-type: none;
margin: 0 auto; /* Added */
    float: none;
}

ul {
	margin: 0 auto; /* Added */
    float: none;
	padding:0px;
}
.card {
	margin: 0 auto; /* Added */
    float: none; /* Added */	
}

#search{
	text-align:center;
	margin-right:30px;
}

input {
   display:block;
   width: 350px;    
}

p{
   text-align:center;
}

#search-footer{
	margin-top:30px;
    margin-left:auto;
    margin-right:auto;	
}

#search-group {
	margin-left:0px;
	width:600px;
}

#group {
	margin-left:25px;
	text-align:left;
}

button {
  height:40px;
}

label {
 text-align:left;
}

@media (min-width: 768px) {
.card{
    margin: 5 auto;
}
}

@media (min-width: 576px) {
.card {
	margin:5 auto;
}
}

Open in new window


I had tried overflow hidden and auto for container.  I get scroll bar for the container.  I don't want scrolling inside container  I want to scroll from outside container and on the browser not on the container.  Please help me in resolving this issue.

With Many Thanks,

Bharath AK
tosend.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
You have set a height of 98% on your container - this will constrain the height of the container.

You also have fixed widths on your cards of 15rem - again forcing the card to a specific width - rather use 100% - if that is too wide for large screens then put in a media query to put the 15rem back for larger screens if required.

Your search input also has a fixed width of 350px which is going to force it outside of its containers.

For responsive design - stay way from absolute widths - use percentage of container - then manage your container's for the different screen sizes.
coderdeveloper

Author

Commented:
Hi Julian,

I haven't followed you suggestion.  Yours might be the best practice.  But I have fixed temporarily this with workaround as mention by stackoverflow solution.   https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height 

Making the parent container as table and child div as table-cell.   now it working temporarily.  I have to follow you suggestion to make a permanent fix.

Thanks your explanation and suggestion.

Regards,
Bharath AK
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial