read

When ScrollView content is shorter than the screen height, you often end up with awkward empty space. Here’s how to make your content fill the available space.

The Simple Solution

Use GeometryReader to measure the ScrollView’s height and apply minHeight to force content expansion:

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            ScrollView {
                VStack() {
                    Header() // This view fixed height
                    
                    AdaptiveView()
                        .frame(maxHeight: .infinity) // This view will fill
                }
                .frame(minHeight: geometry.size.height)
            }
        }
    }
}

How It Works

  1. GeometryReader measures the available space
  2. minHeight forces content to be at least that much space
  3. Make one of the content view fill (maxHeight infinity)

With that, the content expands when short, scrolls when long.


Image

@samwize

¯\_(ツ)_/¯

Back to Home