• Status: Solved
  • Priority: High
  • Security: Public
  • Views: 50
  • Last Modified:

height issue with containers div

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
0
Bharath A.K
Asked:
Bharath A.K
  • 2
1 Solution
 
Julian HansenCommented:
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.
0
 
Bharath A.KAuthor 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
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now