Geek asks and answers

Percentage table row adjustment does not work

Hey guys, so I can’t understand why the sizes do not change at all, can someone help me? My ideal goal would be for the first row to be 70% and the second to 30%. Any advice would be greatly appreciated.

<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
    <div style='display : table; width : 100%; height : 100%'>

        <div style='display : table-row; width : 100%; height : 10%;'>
            <div style="height:100%; width:100%; border:solid; display : table-cell;">
                blah
            </div>
        </div>

        <div style='display : table-row; width : 100%; height : 50%;'>
            <div style="height:100%; width:100%; border:solid; display : table-cell;">
                hah
            </div>
        </div>

    </div>
</body>
</html>
+3
source share
2 answers

Try this code.

Link example here: FIDDLE

HTML code :

<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
    <div style='display : table; width : 100%; height : 100%'>

        <div style='display : table-row; width : 100%; height : 70%;'>
            <div style="height:70%; width:100%; border:solid; display : table-cell;">
                blah
            </div>
        </div>

        <div style='display : table-row; width : 100%; height : 30%;'>
            <div style="height:30%; width:100%; border:solid; display : table-cell;">
                hah
            </div>
        </div>

    </div>
</body>
</html>

hope this code helps you, Also, if you have any clarifications, let me know ...

+1
source

Try below.

<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
    <div style='display : table; width : 100%; height : 100%'>

        <div style='display : table-row; width : 100%; height : 10%;'>
            <div style="height:100%; width:70%; border:solid; display : table-cell;">
                blah
            </div>
        </div>

        <div style='display : table-row; width : 100%; height : 50%;'>
            <div style="height:100%; width:30%; border:solid; display : table-cell;">
                hah
            </div>
        </div>

    </div>
</body>
</html>

or lower

<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
    <div style='display : table; width : 100%; height : 100%'>

        <div style='display : table-row; width : 70%; height : 10%;'>
            <div style="height:100%; width:100%; border:solid; display : table-cell;">
                blah
            </div>
        </div>

        <div style='display : table-row; width : 30%; height : 50%;'>
            <div style="height:100%; width:100%; border:solid; display : table-cell;">
                hah
            </div>
        </div>

    </div>
</body>
</html>

Happy coding

0
source

More articles:


All Articles