100% border to match parent div height

Check out this fiddle: http://jsfiddle.net/Rpdr9/2175/

I have two inline divs using Bootstrap.

I would like to insert a border between them that extends 100% of the parent div's height:

Currently, it matches the card size (yellow box). How can I achieve this?


    <div class="panel panel-default">
        <div class="panel-body all">

            <div class="row clear">
                <div class="col-md-2 sp-right border-right">

                    <div class="tbTile yellow sp-inline">
                            <span> phase</span>                  
                    </div>                  
                </div>
    </div>

            <div class="col-md-10 sp-right "> Something </div>
    </div>

htmlcss

Answer №1

Enclose your div within another container div and utilize a pseudo element to create the central border line.

Here's an example:

html,body{height:100%;
margin:0;padding:0;}
.wrap {
  position: relative;
  height: 100%;
  width: 100%;
  background: gray;
}
.wrap:before {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  border-right: 5px solid black;
}
.left{
  width:49%;
  min-height:50px;
  background:tomato;
  display:inline-block;
  vertical-align:top;
  }
.right{
  width:49%;
  min-height:150px;
  background:blue;
  display:inline-block;
  vertical-align:top;
  }
<div class="wrap">
  <div class="left"></div>
  <div class="right"></div>
</div>

Your updated Fiddle link:

is available here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Styling with CSS to load a background image stored locally

Folder StructureI've been trying to set a background image using a local picture I have, but nothing seems to be working for me. I've checked out various websites for solutions, but everyone seems to have different instructions. I've experim ...

htmlcssdjango

Ways to ensure the first div always expands when sorting in AngularJS

In my AngularJS application, I have a set of div elements generated using ng-repeat. The first div is always expanded by default upon loading the page. Now, when I click a button to sort the divs based on their ID in the JSON data, I want the top div to ...

javascripthtmlangularjs

hiding elements yet passing down

Despite disabling the style sheet, a dynamically created form is displaying strangely. This form will show or hide various details based on selected options. For instance, many of the elements are generated with C#.net... formOutput += "<div class=&bs ...

javascripthtmlcss.netdom

Disabling comments is creating problems with the appearance of Wordpress pages

Visit handheldtesting.com Whenever the option "disable comments" is selected in the backend, or if 'display:none:' is added <div id="respond" class="comment-respond" style="display:none;"> to the code, half of the content on the page dis ...

htmlcsswordpress

Implement a Loop that Generates Buttons with Popups Using jQuery Mobile

Within the context of XML parsing, I have utilized this code to generate buttons dynamically using a loop: $('#button' + counter + paramcounter).click(function(){ sendData(escape(parameterarray[cnt2] + $('#textinput' + cnt + cnt2).v ...

javascriptjqueryhtmljquery-mobile

I am interested in creating a table that can toggle between show/hide mode with a plus/minus feature

$(document).ready(function() { $("#t1").hide(); // hide table by default $("#close").hide(); //hide the minus button as well if you only want one button to display at a time $('#sp1').on('click', function() { //when p ...

javascripthtmlcssbootstrap-4

When using INPUT[type=number], any digits above Number.MAX_SAFE_INTEGER will be discarded

I am facing an issue in my app with a 64-bit integer value that is being displayed as an HTML element. The current input element looks like this: <input id="it" required="" type="number" name="SomeId" value="9123372036854775807"> Upon loading the ...

htmlvalidationfloating-pointlong-integer

How can I design a versatile button in HTML/CSS3/jQuery/Javascript that utilizes images for borders and corners for maximum scalability?

Is there a way to create a completely scalable button in HTML/CSS3/jQuery+Plugins using images for borders and corners? I have attempted a messy method, but I am confident that there are more effective solutions available. The approach I considered invol ...

javascriptjqueryhtmlcss

Delay in dropping while using React Beautiful DnD

While incorporating react-beautiful-dnd into my project, I faced an issue where the dragged item is initially positioned incorrectly in one of the lists. There is a brief delay before it jumps to its correct position. You can see the problem in action by ...

cssreactjsreact-beautiful-dnd

What are the disadvantages of not incorporating the main CSS file directly into the web page?

Optimizing the loading time of my webpages is a priority for me, especially when it comes to first-time loading and from cache. Despite that, I still prefer to have the browser re-validate all resources to avoid any strange displays or update issues caused ...

htmlcsshttpcachingwebserver

Having trouble with Webpack not recognizing my HTML navigation links

I am setting up a new component in my webpack and encountered the following error message: ERROR in ./src/components/MainNav.js Module build failed: SyntaxError: Unterminated JSX contents (121:12) ReactDOM.render( > <MainNav/>, ...

javascripthtmlreactjswebpackjsx

What is the best way to continuously run a series of functions in a loop to create a vertical news ticker effect?

I'm in the process of creating a vertical latest news ticker, and although I'm new to javascript, I'm eager to learn and build it myself. So far, I've come up with this, but I want the news cycle to restart once it reaches the end. ...

javascripthtmlcssloops

Having the ability for two images to adjust in size, becoming smaller or larger, as the page is resized and displayed

On my webpage, I have two divs positioned side by side with images inside them. Everything looks perfect when viewed on my Macbook 13 inch screen, but as I resize the browser window, the photos start to spread apart and create a large gap between them. Is ...

htmlcssresponsive-design

Tips for enabling clicks on elements that are positioned behind elements with a greater z-index

Is it possible to create a full-page reflection effect using a transparent PNG that fades from white to transparent? I want the reflection to overlay everything on the page, while still allowing users to interact with content beneath it. It should not be ...

cssz-index

Ways to include scrolling specifically for one template

As a newcomer to frontend development, I have recently started learning Vue and the Quasar Framework. I am currently working on a table and trying to set a fixed table name with only the table items scrollable. <template> <q-table virt ...

javascriptcssvue.jsquasar-framework

Alter the font color of text using JavaScript in an HTML document

I am struggling to change the title color in my HTML code below, but the text color does not seem to be changing. How can I make this adjustment? /** * Generate a HTML table with the provided data */ Highcharts.Chart.prototype.generateTable ...

javascripthtmlcolors

Tips for concealing a tooltip once a checkbox becomes enabled

I want to show a tooltip only when a checkbox is disabled. Once the correct format is typed into an input text field, the checkbox should become enabled. Currently, I am able to display the tooltip when the checkbox is disabled, but it does not hide when ...

javascriptjqueryhtmlangularjstwitter-bootstrap

The webpage is missing specific rows from a query in a Flask project

I need assistance in setting up a database that allows users to select IDs extracted from MySQL databases. However, I am encountering an issue where the results are not displaying on the webpage. Initially, I suspected it was due to the font color, but aft ...

pythonhtmlmysqlsqlflask

Fixing issues with internal web page connections (#x) present in the HTML code (href="#x" id="x")

Can anyone come up with a brilliant solution as to why my internal links are not functioning properly on a webpage? I've coded the HTML with the usual <a href="#link"><button>Some Text</button></a> .... bunch of content .... & ...

htmlcss

Learn how to efficiently transfer a dynamic subtitle text value from an HTML5 video player to a database

I have successfully developed an HTML5 video player with subtitles. Currently, my goal is to allow the user to submit the subtitle text at a specific timestamp to a database. Despite trying various methods, I am facing challenges in fetching the subtitle t ...

javascriptjqueryhtml