Menu icon Foundation
Problems with filling up heigt

Hey all,

I'm using Foundation 6.5 for sites.

I hope someone can help because I've tried everything, but without success.

  • Question 1
    In the code below, column1 and column2 do not fill the remaining space, despite they have the class 'medium-auto'. What am I doing wrong? The parent div with ID 'column-container' does fill the remaining space.
  • Question 2
    I want the div with ID 'content-container' to be scrollable, only for small devices, so the header and footer stay fixed to top and bottom. How do I do that? 

Thanks,

Rien (The Netherlands)

<body>
    <main class='grid-y grid-frame'>
        <div class="cell shrink header">
            ....
        </div>
        <div class="cell auto body">
            <div id="content-container" class="grid-container grid-container-padded"> // must only be scrollabel on small devices, header and footer fixed on top and bottom!!
                <div class="grid-y medium-grid-frame">
                    <div id="content-header" class="cell shrink content-header">
                        ....
                    </div>
                    <div class="cell auto medium-cell-block-container"> // must always fill the remaining height, on small devices too
                        <div class="grid-x grid-margin-x"> 
                            <div id="column-1" class="cell medium-auto small-12 medium-7 large-9"> // must fill the remaining height but it doesn't!!
                                <div id="content-column-1" class="cell medium-cell-block-y">
                                	....
                                </div>
                            </div>
                            <div id="column-2" class="cell medium-auto small-12 medium-5 large-3"> // must fill the remaining height but it doesn't!!
                                <div id="content-column-2" class="cell medium-cell-block-y">
                                	....
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cell shrink footer">
            ....
        </div>
   </main>
                
</body>

Foundation 6.5 for websitesfilling up remaining spacescollable only on small devices

Hey all,

I'm using Foundation 6.5 for sites.

I hope someone can help because I've tried everything, but without success.

  • Question 1
    In the code below, column1 and column2 do not fill the remaining space, despite they have the class 'medium-auto'. What am I doing wrong? The parent div with ID 'column-container' does fill the remaining space.
  • Question 2
    I want the div with ID 'content-container' to be scrollable, only for small devices, so the header and footer stay fixed to top and bottom. How do I do that? 

Thanks,

Rien (The Netherlands)

<body>
    <main class='grid-y grid-frame'>
        <div class="cell shrink header">
            ....
        </div>
        <div class="cell auto body">
            <div id="content-container" class="grid-container grid-container-padded"> // must only be scrollabel on small devices, header and footer fixed on top and bottom!!
                <div class="grid-y medium-grid-frame">
                    <div id="content-header" class="cell shrink content-header">
                        ....
                    </div>
                    <div class="cell auto medium-cell-block-container"> // must always fill the remaining height, on small devices too
                        <div class="grid-x grid-margin-x"> 
                            <div id="column-1" class="cell medium-auto small-12 medium-7 large-9"> // must fill the remaining height but it doesn't!!
                                <div id="content-column-1" class="cell medium-cell-block-y">
                                	....
                                </div>
                            </div>
                            <div id="column-2" class="cell medium-auto small-12 medium-5 large-3"> // must fill the remaining height but it doesn't!!
                                <div id="content-column-2" class="cell medium-cell-block-y">
                                	....
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cell shrink footer">
            ....
        </div>
   </main>
                
</body>