CSS 表格单元格未填充 100% 的屏幕宽度

Question

I have the following:

<div class="xx-row">
    <div class="background-image" style="background-image: url('<?php echo theme('background_image', 'url'); ?>');">
        <div class="yy-column">

        </div>
    </div>  
</div>

.xx-row {
    display: table;
}

.yy-column {
    display: table-cell;
}

When viewing the page in full screen, for some reason the columns do not fill the width of the page. If I manually set the width it works but I don't want to do this. Setting the width to the 100% doesn't have any effect.

This is how I'd like it to look:

Inspecting element, parent div looks OK and xx-row looks OK too, the background image after the xx-row also looks fine and stretches the screen. So it's the columns that are the issue, if I set it to 100% that fills up the screen but the left column takes up about 80% of the screen.

Answer 1

It might be some problems with width of some parent element of your .row . Inspect all parent elements, I think - you will find the guilty one. Although inspect .column and .row classes in console, maybe there are some other css frameworks that can affect it (the .column and .row names are vary common, uses in Bootstrap etc.). Don't forget to add width: 100%; to your table element.

UPDATED

The main mistake was the .column 's direct parent was not .row , but .background-image . Rewrited the code according to right display: table and display: table-cell , the elements should be direct relatives.

 * { box-sizing: border-box; } html { height: 100%; } body { height: 100%; margin: 0; padding: 0; }.xx-row { display: block; width: 100%; height: 100%; }.background-image { display: table; width: 100%; height: 100%; }.yy-column { display: table-cell; }.one { background: #333; }.two { background: #000; }

 <div class="xx-row"> <div class="background-image" style="background-image: url('<?php echo theme('background_image', 'url'); ?>');"> <div class="yy-column one"> </div> <div class="yy-column two"> </div> </div> </div>