Question 44601 in Html Question posted in
Some basic documentation can be found here.

Lower divs not stretching to the full viewport – Html

I am struggling to achieve a demanded effect. I have a following code structure:

<div className="font-sans h-screen overflow-auto">
  <>
    <div className="flex justify-center items-center w-full flex-col">
      <div className="flex w-full">
        <div className="sm:w-full md:bg-lightBlue bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2">
          <div className="mx-auto px-4">
            <div className="flex justify-between h-16 items-center">
              <div className="flex items-center justify-start">
                {OBJECT1}
                <div
                  className="flex md:hidden sm:hidden text-sm text-inflowGray items-center cursor-pointer w-50"
                  onClick={() => {
                    window.history.back();
                  }}
                >
                  <icons.ChevronLeft className="text-inflowGray w-4 h-4 mr-2 sm:mr-2.5" />
                  Back
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="w-full bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2 pt-0">
          <div className="flex items-center justify-center bg-white">
            {SOME OBJECT2}
          </div>
        </div>
      </div>
    </div>
    <div className="h-full flex flex-wrap">
      <div className="w-full lg:w-1/2 sm:w-full md:bg-lightBlue bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2">
        {OBJECT3}
      </div>
      <div className="w-full lg:w-1/2 bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2 pt-0">
        {OBJECT4}
      </div>
    </div>
  </>
</div>

No I want it to present itself as in the image attached. However, whenever I add h-full, min-h-screen or anything of this sort to which contains Object 3 and Object 4, they go overflow. I want to keep them within screen. Simply, I want Obj3 and Obj4 containing div to fill the remaining viewport below the previous div with Objct 1 and Objct2. How to achieve it? I have been trying the options I have mentioned and they seem not to be working. Desired layout

Tags:

2

Answers


  1. 0

    If you want to keep using flexbox, you won’t be able to achieve exactly the outcome you want (i.e. divided precisely in the middle, like columns), as the elements inside a flex container will adjust according to their content. You can achieve something like this…
    enter image description here

    …with this code:

    <div className="font-sans h-screen overflow-auto">
  <div className="flex justify-center items-center w-full flex-col">
    <div className="flex w-full">
      <div className="bg-pink-500 sm:w-full md:bg-lightBlue bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2">
        <div className="mx-auto px-4">
          <div className="flex justify-between h-16 items-center">
            <div className="flex items-center justify-start">
              {OBJECT1}
              <div
                className="flex md:hidden sm:hidden text-sm text-inflowGray items-center cursor-pointer w-50"
                onClick={() => {
                  window.history.back();
                }}
              >
                <icons.ChevronLeft className="text-inflowGray w-4 h-4 mr-2 sm:mr-2.5" />
                Back
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="w-full bg-yellow-500 bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2 pt-0">
        <div className="flex items-center justify-center bg-white">
          {SOME OBJECT2}
        </div>
      </div>
    </div>
  </div>
  <div className="h-full flex">
    <div className="w-full bg-red-500 lg:w-1/2 sm:w-full md:bg-lightBlue bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2">
      {OBJECT3}
    </div>
    <div className="w-full bg-blue-500 lg:w-1/2 bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2 pt-0">
      {OBJECT4}
    </div>
  </div>
</div>

    If you want them divided in columns, you need to use grid…
    enter image description here

    …like this:

    <div className="font-sans h-screen overflow-auto">
  <div className="justify-center items-center w-full">
    <div className="grid grid-cols-2 w-full">
      <div className="bg-pink-500 sm:w-full md:bg-lightBlue bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2">
        <div className="mx-auto px-4">
          <div className="flex justify-between h-16 items-center">
            <div className="flex items-center justify-start">
              {OBJECT1}
              <div
                className="flex md:hidden sm:hidden text-sm text-inflowGray items-center cursor-pointer w-50"
                onClick={() => {
                  window.history.back();
                }}
              >
                <icons.ChevronLeft className="text-inflowGray w-4 h-4 mr-2 sm:mr-2.5" />
                Back
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="w-full bg-yellow-500 bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2 pt-0">
        <div className="flex items-center justify-center bg-white">
          {SOME OBJECT2}
        </div>
      </div>
    </div>
  </div>
  <div className="h-full grid grid-cols-2">
    <div className="w-full bg-red-500 lg:w-1/2 sm:w-full md:bg-lightBlue bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2">
      {OBJECT3}
    </div>
    <div className="w-full bg-blue-500 lg:w-1/2 bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2 pt-0">
      {OBJECT4}
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Try this my friend:

    m struggling to achieve a demanded effect. I have a following code structure:

<div className="font-sans h-screen overflow-auto flex flex-col">
    <div className="flex justify-center items-center w-full flex-col">
      <div className="flex w-full">
        <div className="sm:w-full md:bg-lightBlue bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2">
          <div className="mx-auto px-4">
            <div className="flex justify-between h-16 items-center">
              <div className="flex items-center justify-start">
                {OBJECT1}
                <div
                  className="flex md:hidden sm:hidden text-sm text-inflowGray items-center cursor-pointer w-50"
                  onClick={() => {
                    window.history.back();
                  }}
                >
                  <icons.ChevronLeft className="text-inflowGray w-4 h-4 mr-2 sm:mr-2.5" />
                  Back
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="w-full bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2 pt-0">
          <div className="flex items-center justify-center bg-white">
            {SOME OBJECT2}
          </div>
        </div>
      </div>
    </div>
    <div className="flex-1 flex flex-wrap">
      <div className="w-full lg:w-1/2 sm:w-full md:bg-lightBlue bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2">
        {OBJECT3}
      </div>
      <div className="w-full lg:w-1/2 bg-white pb-6 sm:pb-16 p-4 sm:p-14 sm:pt-2 pt-0">
        {OBJECT4}
      </div>
    </div>
</div>

    Explanation

    If you try to set the second row height full screen the whole height would be 1st row height + screen height. Which is more than screen height.
    You should have three flex (one for container and two for rows) which you have.
    Make the container full height and a flex with direction column.
    Then two inner flex is rows which you done right. Just second row will be flex-1 instead of screen-h to grow to remaining space instead of specific height.
    That’s it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search