Databases
StackOverflow2013
Postsdbo
POCan't get a child div to match the variable height of either its parent or partner column
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan't get a child div to match the variable height of either its parent or partner column
    primarykey
    data
    text
    <p>I'll try and format the post so it's accessible:</p> <ul> <li><strong>The problem:</strong></li> </ul> <p>I'm having a bit of a frustrating time trying to get one column div (a sidebar) to match the height of either its parent, or the column to its left. I've tried doing it by pure CSS and then by jQuery and thus far haven't been able to find a resolve. The content inside the page is content-managed (Wordpress + Boostrap), and the base itself is used as a template for three other pages, so a fixed-height solution wouldn't really be useful here.</p> <p>Also there are the remnants of the last jQuery attempt I tried, from a solution on StackOverflow for another - quite similar- problem. This didnt work out, but I've left the code in (colh-parent on the parent div, colh-child on the two child columns and jQuery in the header) in case it helps anyone understand what I'm trying to achieve.</p> <p>I've also tried a method involving floating the parent container and the children whcih didn't seem to have any effect either. I'm not too experienced at the moment, and this problem seems to be a little over my head.</p> <ul> <li><strong>The page in question:</strong></li> </ul> <p><a href="http://okamistudio.com/ssawp/pennants/" rel="nofollow">http://okamistudio.com/ssawp/pennants/</a></p> <ul> <li><strong>The goal:</strong></li> </ul> <p>I'm trying to make the blue side strip meet the bottom of the white page, like in this page (though in that page it's being forced down by the content):</p> <p><a href="http://okamistudio.com/ssawp/about-us/" rel="nofollow">http://okamistudio.com/ssawp/about-us/</a></p> <p>What I'm trying to achieve is for the blue background of the sidebar (div.subpage-sidebar) to meet the bottom of the white strip. As I understand it this would require its parent (div.span3) to meet the height of either its partner column (div.span6) or the parent (div.row / .colh-parent). </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USKyuuji
    1. USKyuuji
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCan't get a child div to match the variable height of either its parent or partner column
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI'm having trouble understanding the problem; the page looks okay to me. Maybe you could take a screenshot and highlight what is wrong
      singulars
      1. POCan't get a child div to match the variable height of either its parent or partner column
      1. USExplosion Pills
    2. COIf you check here: http://okamistudio.com/ssawp/about-us/ You see that, albeit forced by padding, the sidebar connects with the bottom, splitting the white block visually/graphically. This is what I'm trying to achieve on the page listed in the OP. I hope that makes it a little clearer, and apologies - I'm not too good at communicating my code-related issues.
      singulars
      1. POCan't get a child div to match the variable height of either its parent or partner column
      1. USKyuuji
    3. COAre you suggesting that this can be done with jQuery or should JavaScript not be a requirement?
      singulars
      1. POCan't get a child div to match the variable height of either its parent or partner column
      1. USExplosion Pills
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload