Currently I am developing a single page web application using Vue.js. This app consists of 4 "page.vue" files, each with a right and left child .vue component nested inside.
For instance, the Page1.vue file is structured as follows (omitting style and script for brevity):
The child components, Page1Links and Page1Rechts, are intended to be loaded into the main section of the page. These two components were separated so that one can easily be replaced with a more complex version while keeping the other intact.
<template>
<div>
<div class="page-wrapper">
<div class="page-container">
<div class="page-header">
<h1 id="page-h1"><span>Mauderer</span> Containertreppenkonfigurator</h1>
</div>
<div class="page-main-content">
<Page1Links id="links"/>
<Page1Rechts id="rechts"/>
</div>
<div class="page-footer">
</div>
</div>
</div>
</div>
</template>
I aim to have a header component spanning the full width of the page, followed by the two child components side by side, where the left component occupies 70% of the width and the right component occupies 30%. Finally, I want the footer to span the full width of the page.
However, my current layout displays all divs stacked at the top of the page in the following order: 1. header div 2. empty main div 3. footer div 4. child components (forced placement)
After attempting different design enhancements like adding box shadows, the child components still do not render within the main div but rather appear below the footer.
Upon receiving suggestions to use flexbox for better layout control, I realized that my issue lies in the rendering of child components outside of their designated main div.
If you refer to this example image, you'll notice that despite expecting the child components to render within the main part, they actually display after Page 1, below it.
Although BootstrapVue is included in my project, I may need to reconsider its usage if there's a simpler approach. Any guidance on resolving this rendering issue would be appreciated.