html - Child div as tall as parent -

html - Child div as tall as parent -

i have bootstrap project other css inherited. don't want alter of existing styles, i'd add together solid-color kid div flush parent on top, left , bottom edges, , number of pixels wide (much narrower parent).

the parent's classes i'd maintain intact are:

.my-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; } .my-link { background-color: transparent; padding: 0; margin: 0; border: 0; position: relative; }

my naive understanding how build kid makes me think css should like:

margin-top: 0px; margin-left: 0px; margin-bottom: 0px; width: 40px; background-color: red;

but still see margins. i've tried several variations changing padding no effect. i've seen answers boil downwards display:table-cell (couldn't create work) or position:absolute, makes kid appear outside parent.

it seems ought simple problem, i'm out of ideas.

display:table-cell; should work may need have display:table; , display:table-row;

you need remove padding .my-heading , move content div.

see below.

.my-heading { border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; display: table; } .my-link { background-color: transparent; padding: 0; margin: 0; border: 0; display: table-row; } .my-content { padding: 10px 15px; width: 100px; background-color: red; display: table-cell; } .my-content2 { padding: 10px; background-color: green; display: table-cell; }

and html

<div class="my-heading"> <div class="my-link"> <div class="my-content"> lorem ipsum dolor sit down amet, consectetur adipisicing elit. labore, assumenda quis debitis aliquam aut dicta praesentium laboriosam eligendi placeat ipsa sint saepe vitae porro! excepturi reiciendis illum @ alias minima. </div> <div class="my-content2"> lorem ipsum dolor sit down amet, consectetur adipisicing elit. deleniti, aliquid, eligendi, dolore nemo corporis iusto est assumenda cupiditate sapiente cumque incidunt excepturi ipsum nisi! iure quisquam commodi nemo saepe rem autem minima inventore temporibus? explicabo, reiciendis, ducimus, quasi alias nobis consectetur accusamus fugiat sed in sit down vitae vel maiores itaque culpa magni voluptatum rem dicta est beatae ea. adipisci, quis aliquam autem voluptas architecto quam asperiores ea ducimus provident harum laboriosam enim beatae ipsam tempore alias voluptatibus dignissimos doloremque recusandae ullam aut error blanditiis odio labore reprehenderit dolore distinctio accusamus? dignissimos, ipsam ea officiis nesciunt ipsum rem aut veritatis! </div> </div> </div>

i've uploaded above bootply http://www.bootply.com/3y7qff2653

html css twitter-bootstrap